真正的iframe 自适应高度，动态高度 js

来源：互联网发布：冰点还原知乎编辑：程序博客网时间：2024/05/20 22:00

百度搜索出来一大堆文章，我看了下没有一个合意的，什么叫动态？就是iframe加载的时候高度慢慢变啊，用户看到了才知道你的内容慢慢加载啊。网上说的都是在onload里设置高度，可是onload是加载完毕才调用的。所以当你加载一些大图片时，就会发现先显示一点点，等半天以后呢，突然就全部显示了，这个设计是不是有点奇葩？

好吧，其实也比较简单，既然onload是加载完毕才调用，那我在加载过程当中定时设置高度不就行了？bingo！激动时刻来了，看代码了：

<iframe src="/en/product/ldsdf.html" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="reinitIframeEND();"  ></iframe><script type="text/javascript" language="javascript">   function reinitIframe(){var iframe = document.getElementById("iframepage");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){}}var timer1 = window.setInterval("reinitIframe()", 500); //定时开始function reinitIframeEND(){var iframe = document.getElementById("iframepage");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.clearInterval(timer1);}</script>

4 4