Iframe 高度自适应, js控制Iframe 高度自适应, iframe自适应高度
================================
©Copyright 蕃薯耀 12月31日
/
方法一：js控制Iframe 高度自适应
这个方法之前一直都在用，没有问题，但最新发现有些情况不行(具体原因不清楚)
/*function thisIframeHeightAuto(){setIframeHeight("auditList");};*///window.setInterval("iframeHeightAuto()", 200);function setIframeHeight(iframeId){var cwin = document.getElementById(iframeId);if(document.getElementById){if(cwin && !window.opera){if(cwin.contentDocument && cwin.contentDocument.body.offsetHeight){cwin.height = cwin.contentDocument.body.offsetHeight;//FF NSconsole.log("FF NS cwin.height=" +cwin.height);}else if(cwin.Document && cwin.Document.body.scrollHeight){cwin.height = cwin.Document.body.scrollHeight;//IEconsole.log("IE cwin.height=" +cwin.height);}}else if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight){cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera}}console.log("cwin.height=" + cwin.height);};
方法二：html代码控制
在方法一不生效的时候，使用了方法二。
头部的html不需要任何的声明，都去掉，如下面代码所示：
<html><head><meta charset="UTF-8"><title>iframe高度自适应</title></head><body><div class="mt20"><iframe id="mapIframe" border="0" frameborder="0" scrolling="no" width="100%" height="100%" style="padding: 0;margin: 0;" ></iframe></div><script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script></body></html>
上面如果能自适应，就不需要下面的；如果上面还不自适应，需要设置
1、body样式中的 overflow: hidden; 绝对不对省略；
2、Iframe 中的 height='100%' 以及 滚动条不能设为no(默认是yes，不用设置即可)
方法三：同样是js控制(未验证)
原理：
Iframe页面的内容利用一个<div id="iframeContent">进行包裹，div会自适应内部高度，因此，可以通过div实现子页面高度的获取。
Iframe页面
<body><div id="iframeContent">...</div><body>
父页面(嵌入Iframe的页面)增加js：
//跨域或子页面无"iframeContent"则高度不能自适应function reinitIframe(iframeId, minHeight) {try {var iframe = document.getElementById(iframeId);var height = iframe.contentWindow.document.getElementById("iframeContent").offsetHeight;if (!height) {height = minHeight;}if (height < minHeight) {height = minHeight;}iframe.style.height = height + "px";} catch (e) {iframe.style.height = minHeight + "px";}}
方法四：同样是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;//如果火狐浏览器高度不断增加删除+2else 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]、OPERAbHeight += 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);}
(如果你觉得文章对你有帮助，欢迎捐赠，^_^，谢谢！)
================================
©Copyright 蕃薯耀 12月31日
/
