postMessage跨窗口传值失败：目标窗口未接收数据技术求助

咱们一步步拆解排查你遇到的问题，核心原因主要集中在代码写法和目标页面的监听逻辑上：

1. 源页面的onload事件绑定错误 #

你当前代码里的yoyo.onload(function() { ... })写法完全不对——window.open返回的窗口对象的onload是事件属性，需要赋值函数而不是直接调用它。正确的两种写法如下：

写法一：直接赋值onload属性 #

function popupCenter(url) {
  const yoyo = window.open(url);
  yoyo.onload = function() {
    yoyo.postMessage("Hello mate", "http://localhost:58810"); // 建议指定具体origin，不要用*
  };
}

写法二：用addEventListener绑定（更规范） #

function popupCenter(url) {
  const yoyo = window.open(url);
  yoyo.addEventListener('load', function() {
    yoyo.postMessage("Hello mate", "http://localhost:58810");
  });
}

之前的错误写法相当于直接调用了onload（但此时它的值是null），导致你的postMessage根本没执行，目标窗口自然收不到消息。

2. 目标窗口必须监听message事件 #

你没提供目标页面的代码，但大概率是目标窗口没有设置message事件监听器，就算源页面发了消息也没人接收处理。在http://localhost:58810的页面里，必须添加如下代码：

window.addEventListener('message', function(event) {
  // 强烈建议校验来源，防止恶意消息注入
  if (event.origin === "http://localhost:8080") {
    console.log('收到消息:', event.data);
    // 这里可以添加你的消息处理逻辑
  }
});

3. 额外排查点 #

• 确认弹窗没有被浏览器拦截：如果弹窗被拦截，window.open会返回null，后续代码全部无法执行，先检查浏览器的弹窗拦截设置。
• 确认跨域规则：你的两个页面端口不同，属于同源策略下的跨域场景，但postMessage完全支持这种情况，只要目标页面正确监听就没问题。

按上面的步骤修改后，应该就能正常传递并接收消息了~

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