iframe自适应高度
收获了一段很有用的iframe自适应高度代码。众所周知,iframe的高度显示一直是个难题,默认高度属性只接受简单粗暴的固定值,易用性差。这段代码将可以帮助iframe的父页面自动适应子页面的高度。
将下列代码插入iframe父页面的标签中。
<script type="text/javascript"> function reinitIframe(){ var iframe = document.getElementById("frame_content"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; }catch (ex){} } window.setInterval("reinitIframe()", 200); </script>
然后在body标签内插入iframe。
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=100"></iframe>
或者
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
该代码分别对IE,Firefox, Opera and Safari进行了测试,效果都很理想。只有Opera有所谓3px的误差。唯一的不足就是不支持跨域,而且在Html Dom的操作上也出现一些问题。所以,如果不进行跨域和Dom操作,这是一个非常理想的对iframe自适应高度的解决方法。
作者:“大米”
发表评论