0

我正在通过我的网站中的 iframe 加载跨域页面 url。像下面

<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 中加载页面。那么我该如何解决这个问题呢？

4

4 回答 4

0

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

如果您确实可以访问两个域，则诀窍是将适当的高度从一个域传递到另一个域。

于 2013-10-21T13:55:31.823 回答
0

iframe由于同源策略，您无法更改或访问从其他域加载的属性。

于 2013-10-21T13:58:24.790 回答
0

您在这里面临同源政策问题。iframe如果它不是来自与父文档相同的域，则您无权访问。你不能改变它的样式，也不能改变 DOM。
但是，如果您能够开发 iframe 指向的 URL 的内容，您可以尝试使用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 之间没有区别，您必须在 message 中提供它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。

于 2013-10-21T14:07:12.227 回答
0

你好，

你能不能试试下面......

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

谢谢你，维沙尔·帕特尔

于 2013-10-21T14:25:37.897 回答