JS实现iframe自适应高度的方法(兼容IE与FireFox)

前端之家收集整理的这篇文章主要介绍了JS实现iframe自适应高度的方法(兼容IE与FireFox)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了JS实现iframe自适应高度的方法分享给大家供大家参考,具体如下:

之前一直被iframe自适应高度的问题困扰,很多JS代码在FF里面似乎就变成哑巴了。后来下面这段代码终于被我从万千号称兼容FF的代码堆中翻了出来。我已经用过了,真的好用。尤其是对于我这样的JS水平较低(真不好意思)的人来说,这段代码简单易懂,方便修改,只要把下面的代码复制粘贴到iframe所在页面标签里面,并且修改一下ID名就行了(注意,要修改的地方有两个,位置在代码中有说明)。

向原创这段代码的朋友致敬。

步骤1:在标签下先输入如下JS代码

页面高度 frm.style.height = subWeb.documentElement.scrollHeight+"px"; frm.style.width = subWeb.documentElement.scrollWidth+"px"; subWeb.body.style.overflowX="auto"; subWeb.body.style.overflowY="auto"; } }

步骤2:在iframe标签加上id="iframe1"onload="adjustFrameSize()"

例如:

代码如下:

这段代码有一个小小的缺点,就是使用后iframe中的内容和外边框(如果存在外边框的话)的距离有点小,可以自己适当调整一下;另外,除IE6.0以上版本和FF以外没有测试过其它浏览器,除此之外尚未发现别的缺陷,如果在使用中发现了问题或者有更好解决方法的童鞋欢迎来分享一下。

如果在iframe页面内部含有ajax加载的页面或者通过js动态去添加内容导致iframe高度变化的情况,可以添加一下方式进行:

1:子页面添加以下内容

修改父窗口地址 function changeHeight(){ window.top.location.hash = "#height=" + $(document).height(); }

修改dom的部分调用方法

2:父页面添加

页面时高度不变 } setTimeout(iframeHeight,100); } iframeHeight();

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《

希望本文所述对大家JavaScript程序设计有所帮助。

猜你在找的JavaScript相关文章