访问跨域Iframe内容高度

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"
);

它发送一个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对象中访问高度。

请注意，包含页面正在从另一个域(localhost2)加载iframe，我已将其添加到hosts文件中用于测试

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

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中的任何内容，它会跨越跨站点脚本的规则，不能完成