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;

  // ...
}