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