iframe自适应高度

传统做法大致有两个: 方法一,在每个被包含页在本身内容加载完毕之后,执行JS取得本页面的高度,然后去同步父页面的iframe高度。 方法二,在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。 在代码维护角度考虑,方法二是优于方法一的,因为方法一,每个被包含页都要去引入一段相同的代码来做这个事情,创建了好多副本。 两个方法都只处理了静的东西,就是只在内容加载的时候执行,如果JS去操作DOM引起的高度变化,都不太方便。 下面推荐一个不错的给需要的人 主页面代码示例:
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe><script type="text/javascript">

function reinitIframe(){

var iframe = document.getElementById("frame_content");

try{

iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;

}catch (ex){}

}

window.setInterval("reinitIframe()", 200);

</script>
不过需要说的是这个在firefox下完美实现,但是在ie下好像还是存在问题……

评论

精彩评论