在網上找了很多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); }