开发学院网页设计 JavaScript 真正的iframe高度自适应(兼容IE,FF,Opera) 阅读

真正的iframe高度自适应(兼容IE,FF,Opera)

　2010-03-10 00:00:00　来源：WEB开发网　　　

核心提示：由于项目上的需要，要用一个iframe高度自适应的功能在google上搜了很久找到了下面这个jsfunctionSetCwinHeight(obj){varcwin=obj;if(document.getElementById){if(cwin&&!window.opera){if(cwin.contentDocume

由于项目上的需要，要用一个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时的特殊现象

发现，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"　　width="600px"> </body> </html>