如果在 window.open 之后立即触发，Window.postMessage 不起作用

Question

我有一个简单的脚本，它使用

window.open

打开一个窗口，然后使用

postMessage

API 向其发送消息。但是使用这个脚本我无法在新打开的窗口上接收消息。

const popup = window.open("http://127.0.0.1:3000/random.html");
popup.postMessage("", window.location.href);

但是，如果我将

postMessage

调用置于超时内，那么一切都会按预期进行。

const popup = window.open("http://127.0.0.1:3000/random.html");
setTimeout(() => {
  popup.postMessage("", window.location.href);
}, 2000);

我用来监听发送消息的脚本如下：

window.addEventListener("message", (event) => {
  alert("Message received");
});

这里有什么问题吗？我期待这能在没有超时的情况下工作。我想在打开新窗口时立即发送消息。

Answer 1

看到您有对打开的新窗口的引用，您可以添加事件侦听器并等待加载：

const popup = window.open("http://127.0.0.1:3000/random.html");
popup.addEventListener('load', () => {
    executeMethod();
});

但是，如果您在另一个源上打开站点，您将被浏览器同源策略阻止：https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

但是，如果您按照 @Kaiido 建议管理这两个应用程序，则可以在应用程序加载完成后使用

window.opener.postMessage()

将消息发回 app1。

我希望这对某人有帮助！