在網上找了很多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>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
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);
}
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLlR2bjlHcvN2LcNXZnFWbp9CXt92YuM3ZvxmYuNmLu9Wbt92Yvw1LcpDc0RHaiojIsJye.gif)
測試發現相容浏覽器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