作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 01:48:35 阅读 我要评论

找到了下面这个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" onload="SetCwinHeight(this);" width="600px"> </body> </html> 这样一来,总算把这三个浏览器给适应了 做为程序员,还是要细心点 再测试一下 OK...3个浏览器均正常显示,也无iframe的纵向滚动条了

  推荐阅读

  JavaScript this调用规则说明

JavaScript函数调用规则一 (1)全局函数调用: 复制代码 代码如下: function makeArray( arg1, arg2 ){ return [this , arg1 , arg2 ]; } 这是一个最常用的定义函数方式。相信学习JavaScript的人对它的调用并不陌生>>>详细阅读


本文标题:js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

地址:http://www.17bianji.com/kaifa2/JS/26933.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)