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

来源：互联网发布：php excel多级下拉版编辑：程序博客网时间：2024/05/14 06:04

在网上找了很多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>

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)            bHeight = iframe.contentWindow.document.body.scrollHeight;        var dHeight = 0;        if (isFireFox == true)            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;        else if (isIE == false && isOpera == false)            dHeight = iframe.contentWindow.document.documentElement.scrollHeight;        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;        iframe.style.height = height + "px";    } catch (ex) { }}function startInit(iframeId, minHeight) {    eval("window.IE9MoreRealHeight" + iframeId + "=0");    window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);}

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

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

阅读全文

0 0