在网上找了很多iframe的高度自适应,发现很多兼容性都不是很好,于是自己总结了一下。
页面html节点上要有
<!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 = false; var isFireFox = false; var isChrome = false; var isSafari = false; var isIE = false; var iframeTime; 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 bHeight += 3; var height = Math.max(bHeight, dHeight); if (height < minHeight) height = minHeight; iframe.style.height = height + "px"; } catch (ex) { } } function startInit(iframeId, minHeight) { isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false; isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false; isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false; isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false; if (!!window.ActiveXObject || "ActiveXObject" in window) isIE = true; reinitIframe(iframeId, minHeight); if (iframeTime != null) clearInterval(iframeTime) iframeTime = window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100); }
测试发现兼容浏览器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同时运行。
转自:http://www.cnblogs.com/slyzly/articles/2422737.html