Iframe 高度自適應, js控制Iframe 高度自適應, iframe自適應高度
================================
©Copyright 蕃薯耀 2019年12月31日
http://fanshuyao.iteye.com/
方法一：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 NS console.log("FF NS cwin.height=" +cwin.height); }else if(cwin.Document && cwin.Document.body.scrollHeight){ cwin.height = cwin.Document.body.scrollHeight;//IE console.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;//如果火狐瀏覽器高度不斷增加洗掉+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);}
（如果你覺得文章對你有幫助，歡迎捐贈，^_^，謝謝！）
================================
©Copyright 蕃薯耀 2019年12月31日
http://fanshuyao.iteye.com/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/85249.html
標籤：Html/Css