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

在网上找了很多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安全浏览器）高度增加后不自动缩减问题

51楼网友回复，提供了一个解决方案，可以参考

页面的页面内容都是利用一个<div class="content">进行包裹，div会自适应内部高度，因此，可以通过div实现子页面高度的获取：
首先需要在子页面body中加入<div>，如下：

<body>
<div class="content" id="main_content">
    ...
</div>
<body>

接着修改主页面js，如下：

//跨域或子页面无"main_content"则高度不能自适应
var frameHeightSetterTimer = null;
 
function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var height = iframe.contentWindow.document.getElementById("main_content").offsetHeight;
        if (!height) {
            height = minHeight;
        }
        if (height < minHeight) {
            height = minHeight;
        }
        iframe.style.height = height + "px";
    } catch (e) {
        iframe.style.height =  minHeight + "px";
        //或者在这里改成楼主的reinitIframe方法使得子页面即使没有"main_content"也具有一定的自适应能力
    }
}
function startInitIframe(iframeId, minHeight) {
    //定时设定iframe高度
    if(frameHeightSetterTimer == null) {
        eval("window.IE9MoreRealHeight" + iframeId + "=0");
        frameHeightSetterTimer = window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
    }
}
//主页面跳转方法
function navigatorHref(url) {
    document.getElementById("mainFrame").setAttribute("src", url);
}

以下为55楼评论提供，可以参考

在chrome上测试，在跳转前利用
document.getElementById("mainFrame").style.height = "0px";//最好设置为minHeight
后，有时候依旧存在打开一个较高网页后跳转较矮网页高度不会自动收缩的问题。

可能是由于设置
document.getElementById("mainFrame").style.height = "0px";//最好设置为minHeight
后，此时页面并未跳转，定时器方法reinitIframe根据未跳转页面重设iframe高度，此时子页面的<body>高度被设置为iframe高度，导致子页面高度不会自动收缩。

解决办法是在父页面跳转iframe前停止定时方法，在跳转后重设，测试后没有再出现问题。如下：
　　
function startInitIframe(iframeId, minHeight) {
    //定时设定iframe高度
    if(frameHeightSetterTimer == null) {
        eval("window.IE9MoreRealHeight" + iframeId + "=0");
        frameHeightSetterTimer = window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
    }
}
function navigatorHref(url) {
    //清除定时设定iframe高度
    if(frameHeightSetterTimer) {
        window.clearInterval(frameHeightSetterTimer);
        frameHeightSetterTimer = null;
    }
    //在iframe页面地址更改前，将iframe高度设置为minheight，清除上一个子页面高度的影响，google内核浏览器的高度才会自动缩减
    document.getElementById("mainFrame").style.height = "600px";
    document.getElementById("mainFrame").setAttribute("src", url);
    //开启定时设定iframe高度
    startInitIframe('mainFrame', 600);
}

但是，本方法依旧存在三个问题：
1.iframe.contentWindow.document.documentElement.scrollHeight无法获取到非本域的子页面高度（跨域问题）
2.本方法通过定时器不停设定iframe高度会有性能上的问题
3.iframe子页面内网页跳转依旧可能存在高度无法自动收缩的问题

第一个问题，跨域，若是可以加入代理页面的域还可以利用代理页面的方式获取子页面内容，但其他域则并没有很好的解决方法。
第二个问题，在性能方面的经测试损耗较小，可以接受；除此之外也没有找到什么更好的方法。
第三个问题，利用iframe.contentWindow.document.documentElement.scrollHeight或iframe.contentWindow.document.body.scrollHeight获取的是子页面body高度，但由于某些原因，body高度并不会完全自适应；另外，在我的环境中子页面的页面内容都是利用一个<div class="content">进行包裹，div会自适应内部高度，因此，可以通过div实现子页面高度的获取：
首先需要在子页面body中加入<div>，如下：
　　
<body>
<div class="content" id="main_content">
    ...
</div>
<body>

接着修改主页面js，如下：
　　
//跨域或子页面无"main_content"则高度不能自适应
var frameHeightSetterTimer = null;

function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var height = iframe.contentWindow.document.getElementById("main_content").offsetHeight;
        if (!height) {
            height = minHeight;
        }
        if (height < minHeight) {
            height = minHeight;
        }
        iframe.style.height = height + "px";
    } catch (e) {
        iframe.style.height =  minHeight + "px";
        //或者在这里改成楼主的reinitIframe方法使得子页面即使没有"main_content"也具有一定的自适应能力
    }
}
function startInitIframe(iframeId, minHeight) {
    //定时设定iframe高度
    if(frameHeightSetterTimer == null) {
        eval("window.IE9MoreRealHeight" + iframeId + "=0");
        frameHeightSetterTimer = window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
    }
}
//主页面跳转方法
function navigatorHref(url) {
    document.getElementById("mainFrame").setAttribute("src", url);
}

posted @ 2012-03-29 09:16 事理阅读(120954) 评论(56) 编辑收藏举报

刷新页面返回顶部

事理

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

公告