iframe高度自適應內容

標籤：

JS自適應高度，其實就是設定iframe的高度，使其等於內嵌網頁的高度，從而看不出來捲軸和嵌套痕迹。對於使用者體驗和網站美觀起著重要作用。

如果內容是固定的，那麼我們可以通過CSS來給它直接定義一個高度，同樣可以實現上面的需求。當內容是未知或者是變化的時候。這個時候又有幾種情況了。

iframe內容未知，高度可預測

這個時候，我們可以給它添加一個預設的CSS的min-height值，然後同時使用javascript改變高度。常用的相容代碼有：

function setIframeHeight(iframe) {if (iframe) {var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;if (iframeWin.document.body) {iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;}}};window.onload = function () {setIframeHeight(document.getElementById(‘external-frame‘));};

只要修改以上的iframe的ID即可了。或者你可以直接在iframe裡面寫代碼，我們一般為了不汙染html代碼，建議使用上面的代碼

<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

多個iframe的情況下

<script language="javascript">//輸入你希望根據頁面高度自動調整高度的iframe的名稱的列表//用逗號把每個iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一個表單，則不用逗號。//定義iframe的IDvar iframeids=["test"];//如果使用者的瀏覽器不支援iframe是否將iframe隱藏 yes 表示隱藏，no表示不隱藏var iframehide="yes";function dyniframesize(){var dyniframe=new Array()for (i=0; i<iframeids.length; i++){if (document.getElementById){//自動調整iframe高度dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);if (dyniframe[i] && !window.opera){dyniframe[i].style.display="block";if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果使用者的瀏覽器是NetScapedyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果使用者的瀏覽器是IEdyniframe[i].height = dyniframe[i].Document.body.scrollHeight;}}//根據設定的參數來處理不支援iframe的瀏覽器的顯示問題if ((document.all || document.getElementById) && iframehide=="no"){var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);tempobj.style.display="block";}}}if (window.addEventListener)window.addEventListener("load", dyniframesize, false);else if (window.attachEvent)window.attachEvent("onload", dyniframesize);elsewindow.onload=dyniframesize;</script>

針對知道的iframe的ID調用

function iframeAutoFit(iframeObj){setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)}

內容寬度變化的iframe高度自適應

<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe><script type="text/javascript">function reinitIframe(){var iframe = document.getElementById("test");try{var bHeight = iframe.contentWindow.document.body.scrollHeight;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;var height = Math.max(bHeight, dHeight);iframe.height = height;console.log(height);}catch (ex){}}window.setInterval("reinitIframe()", 200);</script>

跨域下的iframe自適應高度

跨域的時候，由於js的同源策略，父頁面內的js不能擷取到iframe頁面的高度。需要一個頁面來做代理。
方法如下：假設www.a.com下的一個頁面a.html要包含www.b.com下的一個頁面c.html。
我們使用www.a.com下的另一個頁面agent.html來做代理，通過它擷取iframe頁面的高度，並設定iframe元素的高度。

a.html中包含iframe:

<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>

在c.html中加入如下代碼：

<iframe id="c_iframe"  height="0" width="0"  src="http://www.a.com/agent.html" style="display:none" ></iframe><script type="text/javascript">(function autoHeight(){var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);var c_iframe = document.getElementById("c_iframe");c_iframe.src = c_iframe.src + "#" + b_width + "|" + b_height;  // 這裡通過hash傳遞b.htm的寬高})();</script>

最後，agent.html中放入一段js:

<script type="text/javascript">var b_iframe = window.parent.parent.document.getElementById("Iframe");var hash_url = window.location.hash;if(hash_url.indexOf("#")>=0){var hash_width = hash_url.split("#")[1].split("|")[0]+"px";var hash_height = hash_url.split("#")[1].split("|")[1]+"px";b_iframe.style.width = hash_width;b_iframe.style.height = hash_height;}</script>

agent.html從URL中獲得寬度值和高度值，並設定iframe的高度和寬度（因為agent.html在www.a.com下，所以操作a.html時不受JavaScript的同源限制）

iframe高度自適應內容