跨域iframe如何实现高度自适应？

2019-02-17 01:48:41来源：博客园阅读 ()

经常有项目会要求实现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>