总结iframe高度自适应，自适应子页面高度

最新推荐文章于 2020-10-24 00:43:33 发布

weixin_34247032

最新推荐文章于 2020-10-24 00:43:33 发布

阅读量161

点赞数

文章标签： xhtml javascript ViewUI

本文提供了一种解决iframe高度自适应问题的方法，包括在子页面html节点中添加特定代码，父页面通过js动态调整iframe高度，兼容多种浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。

子页面html节点上要有下面红色部分，不然ie浏览器会无限递增

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx"
            frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>

父页面调用    
<script type="text/javascript">
        startInit('mainFrame', 560);
</script>

//父页面加入下面js

var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
var isIE9More = (! -[1,] == false);
function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var bHeight = 0;
        if (isChrome == false && isSafari == false) {
            try {
                bHeight = iframe.contentWindow.document.body.scrollHeight;
            } catch (ex) {                
            }
        }
        var dHeight = 0;
        if (isFireFox == true)
            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;//如果火狐浏览器高度不断增加删除+2
        else if (isIE == false && isOpera == false && iframe.contentWindow) {
            try {
                dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            } catch (ex) {
            }
        }
        else if (isIE == true && isIE9More) {//ie9+
            var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
            if (heightDeviation == 0) {
                bHeight += 3;
            } else if (heightDeviation != 3) {
                eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
                bHeight += 3;
            }
        }
        else//ie[6-8]、OPERA
            bHeight += 3;

        var height = Math.max(bHeight, dHeight);
        if (height < minHeight) height = minHeight;
        //alert(iframe.contentWindow.document.body.scrollHeight + "~" + iframe.contentWindow.document.documentElement.scrollHeight);
        iframe.style.height = height + "px";
    } catch (ex) { }
}
function startInit(iframeId, minHeight) {
    eval("window.IE9MoreRealHeight" + iframeId + "=0");
    window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}

在iframe页面地址更改前，将iframe高度设置为0，清除上一个子页面高度的影响，google内核浏览器的高度才会自动缩减

document.getElementById("mainFrame").style.height = "0px";//最好设置为minHeight
//$("#mainFrame").height(0);
$("#mainFrame").attr("src", url);

参考http://15757126299.iteye.com/blog/2269250

使用时注意：

1、如有的子页面使用js加载的内容，高度不能自动，可以在body标签上加上固定高度<body style="height:500px;">

2、子页面最底部的元素，不要使用margin-bottom或padding-bottom属性，使用<br/>代替

3、测试时注意：将代码发布到服务器上后，有的浏览器高度才会自动增减，因为在本地浏览的时候因为浏览器权限iframe.contentWindow.document.body.scrollHeight这句会提示拒绝访问

测试发现兼容浏览器ie6-11、chrome、firefox、opera、Safari、傲游云浏览器、360浏览器，兼容性更好，其他未测试，如发现高度不能自适应，请留言给我。

参考http://www.kuqin.com/webpagedesign/20080516/8536.html

更新日志
2015-1-15 更新兼容IE11自动高度

2015-4-15 优化判断性能，同时修复iframe每加载一次，都会同时启用一个新的window.setInterval，导致多个window.setInterval同时运行。

2016-3-30 修复ie9+浏览器高度会自动增加

去除之前"同时修复iframe每加载一次，都会同时启用一个新的window.setInterval，导致多个window.setInterval同时运行"错误判断

2016-5-24 修复ie9+浏览器高度缺少3px的bug

2018-4-14 修复以新版google为内核的浏览器（如360安全浏览器）高度增加后不自动缩减问题