iframe嵌套iframe 页面高度自适应

最新推荐文章于 2024-07-26 15:39:22 发布

小青年一枚

最新推荐文章于 2024-07-26 15:39:22 发布

阅读量2.6k

点赞数 1

本文链接：https://blog.csdn.net/qq_32195805/article/details/107000211

版权

做项目的时候遇到了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);
        }
}