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

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

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

找到了下面這個(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)入了測試過程(調(diào)用很簡單，先略過)
1.IE ---通過但是高度還是有稍微的差距，很小，滾動條還在
2.FF --- 通過與IE一樣，有小差距
3.Opera --- 看那個(gè)JS的條件就知道，通不過的
但主流瀏覽器至少要通過這三項(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> 

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

您可能感興趣的文章:

相關(guān)文章

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