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

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

新老客户大回馈,云服务器低至5折

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

 


原文链接:https://www.cnblogs.com/huoxiao/p/10368557.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:ionic开发中,输入法键盘弹出遮挡住div元素

下一篇:js 学习之路9:运算符