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

===========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>


  • 10
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值