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

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

由于項目上的需要，要用一個iframe高度自適應的功能，在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; 
} 
} 
} 

然后……
進入了測試過程(調用很簡單，先略過)
1.IE ---通過但是高度還是有稍微的差距，很小，滾動條還在
2.FF --- 通過與IE一樣，有小差距
3.Opera --- 看那個JS的條件就知道，通不過的
但主流瀏覽器至少要通過這三項撒！??！
于是，還是Google
搜索各瀏覽器在處理 document.scrollHeight 或者 offsetHeigth時的特殊現(xiàn)象
發(fā)現(xiàn)，Opera瀏覽器在處理iframe內容的時候，用的是contentWindow
而處理內容高度的時候，卻與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> 