js實現(xiàn)的真正的iframe高度自適應(yīng)(兼容IE,FF,Opera)
更新時間:2010年03月07日 12:15:07 作者:
由于項目上的需要,要用一個iframe高度自適應(yīng)的功能,在google上搜了很久,找了一些修改了下。大家可以測試下。
找到了下面這個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;
}
}
}
然后……
進入了測試過程(調(diào)用很簡單,先略過)
1.IE ---通過 但是高度還是有稍微的差距,很小,滾動條還在
2.FF --- 通過 與IE一樣,有小差距
3.Opera --- 看那個JS的條件就知道,通不過的
但主流瀏覽器至少要通過這三項撒?。。?
于是,還是Google
搜索 各瀏覽器在處理 document.scrollHeight 或者 offsetHeigth時的特殊現(xiàn)象
發(fā)現(xiàn),Opera瀏覽器在處理iframe內(nèi)容的時候,用的是contentWindow
而處理內(nèi)容高度的時候,卻與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>
這樣一來,總算把這三個瀏覽器給適應(yīng)了
做為程序員,還是要細心點
再測試一下
OK...3個瀏覽器均正常顯示,也無iframe的縱向滾動條了
復制代碼 代碼如下:
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;
}
}
}
然后……
進入了測試過程(調(diào)用很簡單,先略過)
1.IE ---通過 但是高度還是有稍微的差距,很小,滾動條還在
2.FF --- 通過 與IE一樣,有小差距
3.Opera --- 看那個JS的條件就知道,通不過的
但主流瀏覽器至少要通過這三項撒?。。?
于是,還是Google
搜索 各瀏覽器在處理 document.scrollHeight 或者 offsetHeigth時的特殊現(xiàn)象
發(fā)現(xiàn),Opera瀏覽器在處理iframe內(nèi)容的時候,用的是contentWindow
而處理內(nèi)容高度的時候,卻與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>
這樣一來,總算把這三個瀏覽器給適應(yīng)了
做為程序員,還是要細心點
再測試一下
OK...3個瀏覽器均正常顯示,也無iframe的縱向滾動條了
您可能感興趣的文章:
- 關(guān)于div自適應(yīng)高度/左右高度自適應(yīng)一致的js代碼
- JS實現(xiàn)iframe自適應(yīng)高度的方法示例
- JS實現(xiàn)很實用的對聯(lián)廣告代碼(可自適應(yīng)高度)
- JS實現(xiàn)自適應(yīng)高度表單文本框的方法
- js實現(xiàn)iframe自動自適應(yīng)高度的方法
- 使用javascript實現(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)增長收縮
- JS實現(xiàn)DIV高度自適應(yīng)窗口示例
相關(guān)文章
javascript實現(xiàn)圖片自動和可控的輪播切換特效
這篇文章主要介紹了javascript實現(xiàn)圖片自動和可控的輪播切換特效,效果非常的棒,推薦給大家,有需要的小伙伴可以參考下。2015-04-04js中net::ERR_FILE_NOT_FOUND報錯的解決
本文主要介紹了js中net::ERR_FILE_NOT_FOUND報錯的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07