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;

  // ...
}