解決各類狀況下的iframe高度自適應內容

JS自適應高度，其實就是設置iframe的高度，使其等於內嵌網頁的高度，從而看不出來滾動條和嵌套痕跡。對於用戶體驗和網站美觀起着重要做用。
若是內容是固定的，那麼咱們能夠經過CSS來給它直接定義一個高度，一樣能夠實現上面的需求。當內容是未知或者是變化的時候。這個時候又有幾種狀況了。

iframe內容未知，高度可預測

這個時候，咱們能夠給它添加一個默認的CSS的min-height值，而後同時使用javascript改變高度。經常使用的兼容代碼有：

// document.domain = "caibaojian.com";
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 src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

多個iframe的狀況下

<script language="javascript">
    //輸入你但願根據頁面高度自動調整高度的iframe的名稱的列表
    // 用逗號把每一個iframe的ID分隔. 例如: ["myframe1", "myframe2"]，能夠只有一個窗體，則不用逗號。
    // 定義iframe的ID var 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) //若是用戶的瀏覽器是NetScape
                        dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //若是用戶的瀏覽器是IE
                        dyniframe[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); else window.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的同源限制）