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

2019-11-21 00:41:51

字體：大中小

供稿：網(wǎng)友

找到了下面這個(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> 