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
<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)條了
復(fù)制代碼 代碼如下:
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)于div自適應(yīng)高度/左右高度自適應(yīng)一致的js代碼
- JS實(shí)現(xiàn)iframe自適應(yīng)高度的方法示例
- JS實(shí)現(xiàn)很實(shí)用的對(duì)聯(lián)廣告代碼(可自適應(yīng)高度)
- JS實(shí)現(xiàn)自適應(yīng)高度表單文本框的方法
- js實(shí)現(xiàn)iframe自動(dòng)自適應(yīng)高度的方法
- 使用javascript實(shí)現(xiàn)Iframe自適應(yīng)高度
- js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容
- 兼容主流瀏覽器的iframe自適應(yīng)高度js腳本
- JavaScript 處理Iframe自適應(yīng)高度(同或不同域名下)
- Javascript 文本框textarea高度隨內(nèi)容自適應(yīng)增長(zhǎng)收縮
- JS實(shí)現(xiàn)DIV高度自適應(yīng)窗口示例
相關(guān)文章
php類(lèi)中static與self的使用區(qū)別淺析
在閱讀一些框架的源碼時(shí)發(fā)現(xiàn)了new static(),和new self(),甚是不解,后來(lái)查閱資料,才了解了,所以下面這篇文章主要給大家介紹了關(guān)于php類(lèi)中static與self的使用區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-06-06javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片自動(dòng)和可控的輪播切換特效,效果非常的棒,推薦給大家,有需要的小伙伴可以參考下。2015-04-04html+js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器代碼(加減乘除)
下面小編就為大家?guī)?lái)一篇html+js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器代碼(加減乘除)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07js中net::ERR_FILE_NOT_FOUND報(bào)錯(cuò)的解決
本文主要介紹了js中net::ERR_FILE_NOT_FOUND報(bào)錯(cuò)的解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07一個(gè)JavaScript操作元素定位元素的實(shí)例
操作元素定位元素,大家會(huì)想到使用js來(lái)實(shí)現(xiàn),下面有個(gè)不錯(cuò)的示例,大家可以看看2014-10-10