iframe嵌套iframe 页面高度自适应

做项目的时候遇到了iframe嵌套iframe 需要页面高度跟随页面内容多少来显示。而且还不能使用iframe自带的scrolling滚动条。
刚开始就算父iframe高度 计算错误,导致页面显示只显示一半的内容。

解决方法是 :
在iframe子页面加载完成时首先将iframe的高度值设置为0(清除上一个子页面的高度影响) 然后通过document.body.scrollHeight获取该子页面的高度值 来设置iframe的高度值

<iframe id="main" name="main" width="100%" height="100%"  src="home.html" onload="iFrameHeight()" frameborder="0" scrolling="no" ></iframe>
function iFrameHeight(){
        var ifm= document.getElementById("main");  
        var subWeb = document.frames ? document.frames["main"].document :    ifm.contentDocument;  
        if(ifm != null && subWeb != null) {
            $("#main").height(0);//此处关键处 莫忘  清除上一个子页面高度的影响
            $("#main").height(subWeb.body.scrollHeight);
        }
}

版权声明:本文为qq_32195805原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。