跨域iframe如何實現高度自適應？

經常有項目會要求實現iframe高度自適應，如果是同域的還好說，如果是跨域的，父頁面沒有辦法操作子頁面，想要正確獲取子頁面高度的話，可以采用以下辦法：

方法一：使用HTML5 postMessage

實現原理：子頁面檢測頁面高度通過postMessage將值傳給父頁面

父頁面: http://www.parent.com

<iframe src="http://www.children.com" frameborder="0" id="iframe" scrolling="no" width="100%"></iframe>   
<script>
    window.onload = function(){
        window.addEventListener('message',function(event){
            if(event.origin == "http://www.children.com") {
                document.getElementById('iframe').style.height = event.data + "px";
            }
        })
    }
</script>

子頁面: http://www.children.com

window.onload = function () {
    var h = document.body.scrollHeight;
    parent.postMessage(h, "http://www.parent.com");
}

 

方法二：使用iFrame Resizer插件

iFrame Resizer插件會自動檢測子頁面的高度傳給父頁面，效果比較好不需要做過多的配置，強烈推薦此方案。

父頁面: http://www.parent.com

<iframe src="http://www.parent.com/" frameborder="0" id="iframe" scrolling="no" width="100%"></iframe>  
<script src="./iframeResizer.min.js"></script>
<script>
    iFrameResize({log:true});
</script>

子頁面: http://www.children.com

<script src="./iframeResizer.contentWindow.min.js"></script>

方法三：采用中轉頁面的方法

采用“迂回”的方式解決頁面高度獲取問題。在主頁面的域下建一個空的頁面，子頁面引用這個空的頁面，再通過傳參的方式，將子頁面的高度“告知”主頁面，不推薦此方案

父頁面：http://www.parent.com

<iframe src="http://www.children.com" frameborder="0" width="100%" id="iframe"></iframe>
<script type="text/javascript">
    function updateIFrame(height) {
        var iframe = document.getElementById('iframe-Scat');
        iframe.setAttribute('height', height);
    }
</script>

子頁面: http://www.children.com

拿到子頁面的高度后將值重新賦給父頁面下的空頁面

<iframe src="http://www.parent.com/blank.html" id="resize-iframe" style="display: none;"></iframe>
<script type="text/javascript">
    window.onload = function() {
        var h  = document.body.scrollHeight;
        document.getElementById("resize-iframe").src = "http://domain1.com/c.html?height=" + h;
    }
</script>

空頁面：http://www.parent.com/blank.html

因為此頁面和父頁面是同源，這時就可以直接把高度傳給父頁面

<script type="text/javascript">
    window.onload = function() {
        var h = location.search.replace('?', '').split('=')[1];
        // parent.parent.document.getElementById("iframe-Scat").style.height = h + 'px';
        window.top.updateIFrame(h);
    }
</script>