Question

我试图根据iframe内容高度调整iframe高度，iframe src是跨域的我的代码是：

jQuery(document).ready(function() {
  jQuery("#survey_iframe").load(function() {
      var h = jQuery(this).contents().find("body").height();
      jQuery(this).height( h );
  });
});

我也尝试了插件https://github.com/davidjbradshaw/iframe-resizer，但没有成功，

iFrameResize({
log                     : true,
enablePublicMethods     : true
});

请在这里建议。

Answer 1

这可以使用postMessage()，这是一个跨域消息交换功能。

您的iframe内容会发布消息

位置： http://localhost2:8080/

parent.postMessage(
    '{"height": '+ document.body.scrollHeight +'}',
    "http://localhost:8080"
);

它将具有height属性的JSON对象发送到parent，这是Iframe的父窗口。

请注意，postMessage()明确指定localhost为目标域

您的包含页面将侦听消息事件

位置： http://localhost:8080

window.addEventListener("message", function(e){
    console.log("iframe:load", JSON.parse(e.data));
}, false);

它可能包含位于另一个域的另一个页面，如下所示：

<iframe src="http://localhost2:8080/iframe.html"></iframe>

然后，您可以在该已解析的JSON对象中访问高度。

请注意，包含页面正在从我已添加到hosts文件中的其他域（localhost2）加载iframe以进行测试

出于安全原因，您应该检查消息事件中的origin（发送消息的URL），并忽略来自未知来源的每个事件。
您的postMessage()来电应尽可能精确地指定目标网址。

所有现代浏览器都支持postMessage()功能，直至IE 9：http://caniuse.com/#search=postmessage

关于它的MDN：https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage?redirectlocale=en-US&redirectslug=DOM%2Fwindow.postMessage

Answer 2

根据我对跨站点脚本限制的理解，您对iframe的唯一控制是它自己的元素，而不是内容。这主要是为了防止恶意“克隆”。

如果你想自己调整iframe的大小，就像你通常操纵任何DOM元素一样，如果你试图触摸iFrame中的任何内容，它会跨越跨站点脚本的规则而不能完成。

跨域访问iframe内容高度

2 个答案:

您的iframe内容会发布消息

您的包含页面将侦听消息事件