HTML5 - 跨浏览器 iframe 消息传递 - 父子通信答案

【问题标题】：HTML5 - Cross Browser Iframe postmessage - parent to child communicationHTML5 - 跨浏览器 iframe 消息传递 - 父子通信
【发布时间】：2012-07-31 13:34:33
【问题描述】：

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

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

代码

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

不知何故不起作用，我收到Cannot call method 'postMessage' of undefined 错误。但是当我直接在 Chrome 的控制台中尝试相同的代码时，它就成功了。

不过，我可以毫无问题地从子级向父级发送 postMessage，但只需要一种让父级向子 iframe 发送消息的方法。

【问题讨论】：

标签： javascript html cross-browser postmessage

【解决方案1】：

我最近编写了将postMessage 转换为iframe 的代码，我遇到了一个非常相似的问题，它说contentWindow 是undefined。

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

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

我发现postMessage 的Mozilla Developer Network 页面在我处理项目时非常有用。

【讨论】：

【解决方案2】：

我已经成功使用了以下库：

http://easyxdm.net/wp/

它不需要任何闪光灯/silverlight，只需要 javascript。它与 IE6 兼容。

启动并运行它需要花费一些时间，但一旦启动，事情就会非常顺利。

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

祝你好运！

【讨论】：

此库需要 Flash，许多浏览器已不再支持。
@AndersonGreen 它只对不支持 postMessage 的浏览器使用 flash，因为我们可以假设它们支持 flash 或者无论如何都会失败......

【解决方案3】：

您不需要以 contentWindow 为目标。试试这个：

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

【讨论】：