请使用firefox,chrome等最新浏览器浏览本站。

iframe跨域高度自适应

html5 阿豹 549次浏览 0个评论 扫描二维码

最近在做项目中,遇到了iframe嵌套第三方网站,需要iframe正常使用。下面分享一下遇到的问题,以及解决方案。
项目链接:http://www.qutouzhu.com/

最初的想法是设置iframe width:100%, height: 100%, overflow:auto;
使用这种方式在pc端可以实现效果。但是在移动端,尤其是android浏览器中出现iframe超出部分不能拖动的bug。

那么要实现效果只能动态实现iframe高度自适应.

如何实现iframe高度自适应

a. 非跨域情况下:

var _height =  $("#hIframe").contents().find("body").height();
$("#hIframe").height(height );

b.跨域情况下:
跨域情况下,在index.html中不可以直接操作iframe的document。这时候需要与第三方网站做通讯。
iframe跨域通讯,之前写过几篇文章,详细介绍了实现方式:
跨域总结1 – location.hash+iframe

跨域总结2 – HTML5 postMessage API

跨域总结4 – window.name

跨域总结5 – messenger.js

跨域总结6 – document.domain
由于考虑到postMessage API 的兼容性问题,最终使用messenger.js实现。

index.html

<html>
<meta charset="UTF-8" />
<h1>通过messenger.js 进行javasript跨域操作</h1>
<script src="messenger.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<iframe src="http://www.hui.com/header.html" width="" height="" id="hIframe">header</iframe>
<script type="text/javascript">
//console.dir($("#hIframe").contents().find("body").height());
var messenger = new Messenger('parent', 'MessengerDemo'),
    hIframe = document.getElementById('hIframe');
messenger.listen(function(msg) {
    document.getElementById('hIframe').style.height = parseInt(msg);
});
</script>

</html>

header.html

<html>
<meta charset="UTF-8" />
<script src="messenger.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<body>
    header
    <script type="text/javascript">
    var messenger = new Messenger('hIframe');
    messenger.addTarget(window.parent, 'parent');

    function sendHeight(_height) {
        messenger.targets['parent'].send(_height);
    }

    window.onload = function() {
        sendHeight($("body").height());
    }
    </script>
</body>

</html>

这里需要注意的是传入的高度应该是$(“body”).height(), 不要使用$(document).height(). 因为使用$(document).height(), iframe内部点击跳转链接,iframe的高度会出现一直变大,不能准确获取的bug。


转载请注明iframe跨域高度自适应
喜欢 (9)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到