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);
        }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容