如何动态地将高度赋予 iframe答案

【问题标题】：how to give the height dynamically to iframe如何动态地将高度赋予 iframe
【发布时间】：2013-10-21 22:25:37
【问题描述】：

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

【问题讨论】：

试试这个 $(this).outerHeight(true);或 $(this).css("height");

标签： jquery html

【解决方案1】：

您在这里遇到了same origin policy 问题。如果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，您必须在消息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。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

嗨，

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

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

谢谢，维沙尔·帕特尔

【讨论】：