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

Question

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

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

编码

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

不工作，我得到一个Cannot call method 'postMessage' of undefined错误。但是当我直接在 Chrome 的控制台中尝试相同的代码时，它起作用了。

不过，我可以毫不费力地从孩子向父母发送 postMessage，但只需要一种让父母向孩子 iframe 发送消息的方法。

score 3 · Accepted Answer

我最近编写了postMessage对 an 执行的代码，iframe我遇到了一个非常相似的问题，它说contentWindow的是undefined.

就我而言， myiframe还不是 DOM 树的一部分，它是由document.createElement('iframe').

一旦我把它隐藏（宽度和高度 0px，可见性隐藏）到页面的主体，contentWindow不再是未定义的，一切都按预期工作。

当我在做我的项目时，我发现Mozilla 开发者网络页面非常有用。postMessage

score 1 · Accepted Answer

我已经成功使用以下库：

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

启动并运行它需要做一些事情，但是一旦它运行起来非常顺利。

请记住，如果您在其他域上打开的 iFrame 使用不同的协议（HTTP 与 HTTPS），浏览器将发出警告，阻止您的脚本运行（除非用户表示他们将接受风险）。如果您可以访问这两种协议，那么在 HTTP 和 HTTPS 上托管 iFrame 的内容并相应地加载适当的脚本可能是明智之举。

祝你好运！

score -2 · Accepted Answer

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

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

3 回答 3