javascript - 如何使用来自另一个域的脚本向父窗口发送消息？

Question

我正在构建一项服务，您可以使用一行 JavaScript 代码将其植入您的网站 - 像 Facebook 一样思考 like button .

所以我将代码添加到 random.com，并且该代码是从 mysite.com/js.js 加载的。

如果用户未登录，出于安全考虑，我不想让他们通过 iframe 登录 - 我打开一个他们可以登录的窗口。当他们成功登录时，我需要获取父窗口一个新的XSRF token 。所以我需要能够告诉父窗口这样做。

我在 iframe 中使用它来执行其他操作，但是当我使用此代码从窗口尝试时:

window.parent.postMessage('message', '*');

没有任何反应。如果我将 * 更改为 random.com，我会收到此错误:

Unable to post message to http://random.com. Recipient has origin https://mysite.com

我认为必须如此，因为添加监听器的脚本:

$(window).bind('message', myfunction);

它实际上在 mysite.com 上的脚本中。

但奇怪的是，当 iframe 调用完全相同的脚本时，它会完美运行!并且 iframe 调用它时将 targetOrigin 设置为 random.com(这会导致上述安全错误)。

Answer 1

window.parent 仅适用于 iframe 而 window.opener 适用于单独的窗口。

最重要的是，因为我试图向父窗口发送消息，但是新窗口是由该窗口中的 iframe 打开的。

所以 window.opener 到达了 iframe - 然后我不得不将消息实际发送给它的父级:

window.opener.parent.postMessage(etc, etc);