iframe自适应高度,兼容ie firefox chrome

关于iframe自适应高度的解决方法在百度里能搜出上百篇文章,但多数解决方法都针对一个浏览器可以,无法兼容多个浏览器,查阅http://bbs.blueidea.com/thread-2902341-1-1.html博客,其中对多个浏览器的分析讲的很清晰,但对于作者使用window.setInterval("reinitIframe()", 200);在每个一段时间去改变高度,我觉得没必要,我的解决方法的是在iframe每次加载的时候改变高度:

首先:调节iframe高度代码如下:

function reinitIframe(){
 var iframe = document.getElementById("iframeID");
 
 try{
 var bHeight = iframe.contentDocument.body.scrollHeight;
 var dHeight = iframe.contentDocument.documentElement.scrollHeight;
 var height = Math.max(bHeight, dHeight);
 iframe.height =  height;
 }catch (ex){}
 }

代码很简单,就是去获取iframe内容的高度,网上很多方法用iframe.document.body.scrollHeight 和 iframe.document.documentElement.scrollHeight获取iframe内容高度,这中方法在firefox和chrome中执行错误,你可以在catch中获取异常。所以使用iframe.contentDocument.body.scrollHeight在多个浏览器中都能正确获取到iframe内容的高度。

接下来就是在iframe加载后调用reinitIframe();改变iframe高度,代码如下:

<iframe src="user_manage.html" width="100%" frameborder="0" id="iframeID" name="iframeID" scrolling="no" onload="reinitIframe();")></iframe>

就这样,iframe就能自适应高度了(注:这是在不跨域情况下。)

大家如发现什么什么错误,请指正,感激不尽!!也欢迎大家一起学习交流。

原文地址:https://www.cnblogs.com/liveandevil/p/2871636.html