window.open后立即调用postMessage失效，如何实现即时消息发送？

问题出在哪？ #

当你调用window.open后立刻执行popup.postMessage，此时新窗口的页面还处于加载过程中，你写的window.addEventListener("message")还没被执行（脚本还没加载或解析完成）。这时候发送的消息会直接“错过”，因为没有任何监听者在等待它。

而setTimeout能工作，只是因为2秒的延迟足够新窗口完成页面加载，消息监听已经注册完毕，所以能接收到后续发送的消息。但这种方式不可靠——不同设备、网络环境下，页面加载时间差异很大，延迟设短了可能还是失败，设长了影响体验。

无需延迟的解决方案 #

方案1：监听新窗口的load事件 #

在父窗口中，等待新窗口的load事件触发后再发送消息，这能确保新窗口的所有脚本都已执行完毕：

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

方案2：新窗口主动告知就绪（更可靠） #

这种方式更灵活，即使新窗口加载慢或者有异步操作，也能准确把握时机：

• 新窗口代码：

// 新窗口加载完成后，主动给父窗口发消息说自己准备好了
window.addEventListener("load", () => {
  window.opener.postMessage("popup-ready", window.opener.location.href);
});

// 继续保留原有的消息监听
window.addEventListener("message", (event) => {
  // 可以加个判断，过滤掉就绪通知的消息
  if (event.data !== "popup-ready") {
    alert("Message received");
  }
});

• 父窗口代码：

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

// 监听新窗口的就绪通知，收到后再发送目标消息
window.addEventListener("message", (event) => {
  if (event.data === "popup-ready" && event.source === popup) {
    popup.postMessage("", window.location.href);
  }
});

内容的提问来源于stack exchange，提问作者webnoob