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

最新推荐文章于 2018-06-20 09:35:53 发布

原创最新推荐文章于 2018-06-20 09:35:53 发布 · 6.9w 阅读

17 ·

CC 4.0 BY-SA版权

嵌入式网络专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种动态调整iframe加载过程中高度的方法，解决大内容加载延迟导致的用户体验问题。通过定时设置iframe高度，实现了加载过程中的平滑过渡效果。

===========20170321补充==============

没相当那么多人需要，好吧，我增加了注释，大家一看就明白了。有的说不行，那换个浏览器试试？原理想通，就是兼容性问题了。

===========补充END==========

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

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

<iframe src="/en/product/ldsdf.html" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" 
onLoad="IframeLoadEND();"  ></iframe>

<script type="text/javascript" language="javascript">

// 定义一个函数，定时调用并刷新iframe高度
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 IframeLoadEND(){
var iframe = document.getElementById("iframepage");
try{
    window.clearInterval(timer1);
    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>