HTML5 - 跨浏览器iframe postmessage - 父与子通信

Question

我写了一个内容脚本，它将iframe注入任何网站（因此不同的域名）。

我需要父网站向子iframe发送一些信息，但我找不到办法。

代码

var targetFrame = $('#myIframe')[0];
targetFrame.contentWindow.postMessage('the message', '*');

不能以某种方式工作，我收到Cannot call method 'postMessage' of undefined错误。 但是当我在Chrome的控制台中直接尝试使用相同的代码时，它确实有效。

我将postMessage从子节点发送到父节点没有问题，但只需要一种方法让父节点向子节点iframe发送消息。

Answer 1

我最近编写了postMessage iframe的代码，我遇到了类似的问题，其中contentWindow是undefined。

就我而言，我的iframe还不是DOM树的一部分，它是由document.createElement('iframe')创建的变量。

一旦我将其隐藏（宽度和高度为0px，隐藏可见性隐藏）到页面正文中，contentWindow就不再是未定义的，一切都按预期工作。

我在处理项目时发现postMessage的{​​{3}}页非常有用。

Answer 2

我使用以下库取得了成功：

http://easyxdm.net/wp/

它不需要任何flash / silverlight，只需要javascript。并且它与IE6一样兼容。

它需要一点点才能启动并运行，但一旦它运行得非常顺利。

请注意，如果您在其他域上打开的iFrame使用不同的协议（HTTP与HTTPS），浏览器将发出警告，阻止您的脚本运行（除非用户说他们会接受风险）。如果您可以访问这两种协议，则可以在HTTP和HTTPS上托管iFrame的内容，并相应地加载相应的脚本。

祝你好运！

Answer 3

您无需定位contentWindow。试试这个：

var targetFrame = $('#myIframe')[0];
targetFrame.postMessage('the message', '*');