快捷導(dǎo)航

js實(shí)現(xiàn)的真正的iframe高度自適應(yīng)(兼容IE,FF,Opera)

更新時(shí)間：2010年03月07日 12:15:07 作者：

由于項(xiàng)目上的需要，要用一個(gè)iframe高度自適應(yīng)的功能，在google上搜了很久，找了一些修改了下。大家可以測(cè)試下。

找到了下面這個(gè)js

 
function SetCwinHeight(obj) 
{ 
var cwin=obj; 
if (document.getElementById) 
{ 
if (cwin && !window.opera) 
{ 
if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight) 
cwin.height = cwin.contentDocument.body.offsetHeight + 20; 
else if(cwin.Document && cwin.Document.body.scrollHeight) 
cwin.height = cwin.Document.body.scrollHeight + 10; 
} 
} 
} 

然后……
進(jìn)入了測(cè)試過(guò)程(調(diào)用很簡(jiǎn)單，先略過(guò))
1.IE ---通過(guò) 但是高度還是有稍微的差距，很小，滾動(dòng)條還在
2.FF --- 通過(guò) 與IE一樣，有小差距
3.Opera --- 看那個(gè)JS的條件就知道，通不過(guò)的
但主流瀏覽器至少要通過(guò)這三項(xiàng)撒?。?！
于是，還是Google
搜索各瀏覽器在處理 document.scrollHeight 或者 offsetHeigth時(shí)的特殊現(xiàn)象
發(fā)現(xiàn)，Opera瀏覽器在處理iframe內(nèi)容的時(shí)候，用的是contentWindow
而處理內(nèi)容高度的時(shí)候，卻與IE一致
從而，有了下面這段js

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<script> 
function SetCwinHeight(obj) 
{ 
var cwin=obj; 
if (document.getElementById) 
{ 
if (cwin && !window.opera) 
{ 
if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight) 
cwin.height = cwin.contentDocument.body.offsetHeight + 20; //FF NS 
else if(cwin.Document && cwin.Document.body.scrollHeight) 
cwin.height = cwin.Document.body.scrollHeight + 10;//IE 
} 
else 
{ 
if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight) 
cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera 
} 
} 
} 
</script> 
</head> 
<body> 
<iframe src="20103622440.html" onload="SetCwinHeight(this);" width="600px"> 
</body> 
</html> 

這樣一來(lái)，總算把這三個(gè)瀏覽器給適應(yīng)了
做為程序員，還是要細(xì)心點(diǎn)
再測(cè)試一下
OK...3個(gè)瀏覽器均正常顯示，也無(wú)iframe的縱向滾動(dòng)條了

您可能感興趣的文章:

相關(guān)文章

ECMAScript6--解構(gòu)
解構(gòu)就是將聲明的一組變量和與相同結(jié)構(gòu)的數(shù)組或者對(duì)象的元素?cái)?shù)值一一對(duì)應(yīng)，并將變量相對(duì)應(yīng)元素進(jìn)行賦值。本文將詳細(xì)介紹ECMAScript6--解構(gòu)的相關(guān)知識(shí)。下面跟著小編一起來(lái)看下吧
2017-03-03
JavaScript Ajax編程應(yīng)用篇
這篇文章主要介紹了JavaScript Ajax編程之應(yīng)用篇，感興趣的朋友可以參考一下
2016-07-07
setInterval計(jì)時(shí)器不準(zhǔn)的問(wèn)題解決方法
在js中如果打算使用setInterval進(jìn)行倒數(shù),計(jì)時(shí)等功能，往往是不準(zhǔn)確的，針對(duì)這個(gè)問(wèn)題，本文有個(gè)不錯(cuò)的解決方案
2014-05-05
用js編寫(xiě)的簡(jiǎn)單的計(jì)算器代碼程序
這篇文章主要介紹了用js編寫(xiě)的簡(jiǎn)單的計(jì)算器代碼程序，非常具有實(shí)用性,感興趣的小伙伴可以參考下
2015-08-08
js從Cookies里面取值的簡(jiǎn)單實(shí)現(xiàn)
遇到一個(gè)Js從Cookies里面取值的需求，Js貌似沒(méi)有現(xiàn)成的方法可以指定Key值獲取Cookie里面對(duì)應(yīng)的值，簡(jiǎn)單實(shí)現(xiàn)如下
2014-06-06
js實(shí)現(xiàn)帶按鈕的上下滾動(dòng)效果
這篇文章主要介紹了js實(shí)現(xiàn)帶按鈕的上下滾動(dòng)效果,設(shè)計(jì)javascript鼠標(biāo)事件及頁(yè)面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下
2015-05-05
面向?qū)ο笤O(shè)計(jì)模式的核心法則
有本經(jīng)典的書(shū)叫《設(shè)計(jì)模式》，講了經(jīng)典的21種設(shè)計(jì)模式，建議大家都看看
2013-11-11
JS中fetch()用法實(shí)例詳解
在JS中使用fetch更加高效地進(jìn)行網(wǎng)絡(luò)請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于JS中fetch()用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
JS中Safari瀏覽器中的Date
在js中處理Date時(shí),發(fā)現(xiàn)Safari和其他瀏覽器的支持方式不一致。下面通過(guò)本文給大家分享js中Safari瀏覽器中的Date，感興趣的朋友一起學(xué)習(xí)吧
2017-07-07
bootstrap中添加額外的圖標(biāo)實(shí)例代碼
可以針對(duì)校驗(yàn)狀態(tài)為輸入框添加額外的圖標(biāo)。接下來(lái)通過(guò)本文給大家分享bootstrap中添加額外的圖標(biāo)實(shí)例代碼，需要的的朋友參考下吧
2017-02-02