Question

我在我的网站中通过iframe加载跨域网页网址。如下所示

<iframe class="iframeId" src="cross domain... /view/id/100" scrolling="no"></iframe>

我希望在加载页面后设置iframe的高度如果我使用下面的代码获取跨域url的错误

$('.iframeId').load(function () {
    this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});

错误是“错误：访问属性'文档'的权限被拒绝”。我的目标是在没有滚动条的iframe中加载页面。那我怎么解决这个问题呢？

Answer 1

如果您无权访问这两个域，则无法解决此问题。如果你能够做到这一点，请考虑安全漏洞。

如果您确实可以访问这两个域，那么技巧就是将适当的高度从一个域传递到另一个域。

Answer 2

由于same origin policy，您无法更改或访问从其他域加载的iframe的属性。

Answer 3

您在此处遇到same origin policy问题。如果{strong} 来自与父文档相同的域，则您无法访问iframe。你不能改变它的风格，也不能改变DOM 但是，如果您能够开发iframe指向的网址内容，则可以尝试使用message事件和postMessage方法。您的父文档可以

$('#iframeId').load(function () {
    $('#iframeId').get(0).contentWindow.postMessage('requestHeightChange', '*');
});

然后iframe中的文档应该收听message事件

$(window).on('message', function(e) {
    var data = e.data;
    if (!data) data = e.originalEvent.data;
    if ("requestHeightChange" == data) {
        window.parent.postMessage("setHeight:" + document.body.offsetHeight, "*");
    }
});

您的父文档也应该收听message事件，因此，哪条iframe来自iframe之间没有区别，您必须在邮件data中提供。 event.data是唯一可以由postMessage发送的数据。 Parent的事件监听器可能如下所示：

$(window).on('message', function(e) {
    var data = e.data;
    if (!data) data = e.originalEvent.data;
    data = data.split(":");
    if ("setHeight" == data[0]) {
        $('#iframeId').height(data[1] + "px");
    }
});

要详细了解postMessage，请参阅MDN。

Answer 4

<强>您好，

请你试试下面......

> <script type="text/javascript">
>     $(document).ready(function () {
>         $('.iframeId').height($(document).height());
>     }); 
> </script>

谢谢， Vishal Patel

如何动态地给高度iframe

4 个答案: