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

标签：

百度搜索出来一大堆文章，我看了下没有一个合意的，什么叫动态？就是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>

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

标签：

原文地址：http://blog.csdn.net/lanmanck/article/details/46522033