JS：无法让 window.parent 使用 postMessage

Question

所以我一直在关注许多关于使用 window.postMessage() 在容器 window 及其 iframe 内容 window 之间进行通信的教程。

但是，我遇到了无法定位收件人的window 的问题，我可以调用postMessage()，或者更确切地说，我获得的对象是空的。这里有一些解释，大家可以看Github repo中的代码关注我。

我有两个项目，iframe-content 和 iframe-container，它们完全符合您的预期。这些项目中的每一个都需要以window 对象为目标才能调用window.postMessage()。

在容器的情况下，运行这段代码

var childWindow = document.getElementById('iframeContent').contentWindow
console.log('childWindow: ', childWindow);

不会导致错误，但返回的window 对象没有任何属性。 See the code.

同样，在<iframe> 内容中执行此操作

var parentWindow = $window.parent;
console.log('parentWindow: ', parentWindow);

与关于容器的解释相同。 See the code.

查看我的意思是空的window 对象的屏幕截图：

在这两种情况下，调用postMessage() 函数都不会返回错误，但实际上会失败。

我可能忽略了什么？我应该调查什么？感谢任何指导，谢谢。

Answer 1

听起来您可能正在尝试访问跨域 iframe。确保使用正确的来源和事件侦听器设置 api。

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

记住 iframe 需要一个消息监听器

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}