window.opener.postMessage() 无法正常工作的问题求助

我之前也碰到过一模一样的情况，折腾了好一会儿才找到原因，给你几个实用的排查和解决方向：

• 先确认同源是否匹配
  postMessage对同源的要求很严格，协议、域名、端口必须完全一致（比如http://localhost:3000和http://127.0.0.1:3000都算不同源）。你可以在弹窗里打印window.opener.origin和自身的window.origin，看看两者是否完全一致。如果不同源，要么把两个页面调整到同源环境，要么在opener的事件监听里明确验证e.origin是你信任的来源（跨域下postMessage是允许的，但必须正确处理来源验证）。

• 确保window.opener存在且未被关闭
  有时候浏览器的弹窗拦截机制或者opener页面意外刷新，会导致window.opener变成null或者标记为已关闭。你可以在弹窗发送消息前加个判断：

  if (window.opener && !window.opener.closed) {
    window.opener.postMessage({key: '<some string>'}, window.opener.origin);
  } else {
    console.log('Opener window is not available');
  }
  

• 检查事件监听器的注册时机
  要是opener的message监听器是在弹窗发送消息之后才注册的，那肯定收不到消息。比如你把监听器放在某个按钮点击事件里，而弹窗已经提前发了消息。建议把监听器放在opener页面的DOMContentLoaded事件里，或者页面加载初期就注册：

  document.addEventListener('DOMContentLoaded', () => {
    window.addEventListener("message", function (e) {
      console.log(`Message received: ${JSON.stringify(e.data)}`);
      console.log('Origin: ', e.origin);
      if (e.data.key != undefined) {
        console.log('Received key: ', e.data.key);
        setLoginKey(e.data.key);
      }
    }, false);
  });
  

• 明确指定postMessage的目标origin
  不要省略postMessage的第二个参数（目标origin），用window.opener.origin替代'*'，这样不仅更安全，还能避免部分浏览器的安全限制拦截消息：

  window.opener.postMessage({key: '<some string>'}, window.opener.origin);
  

• 排查浏览器隐私设置
  有些浏览器的隐私模式、第三方Cookie拦截设置可能会阻断opener和弹窗的通信。比如Chrome的「阻止第三方Cookie」、Firefox的隐私增强模式，试试在正常浏览模式下测试，或者临时调整这些设置看看效果。

• 简化调试，排除业务逻辑干扰
  先把opener的监听器改成最基础的版本，排除是不是后续的业务逻辑判断导致没输出：

  window.addEventListener("message", function (e) {
    console.log('Raw message received:', e);
  }, false);
  

  要是这个基础监听器能收到消息，再逐步加回你的业务判断代码，定位问题点。

内容来源于stack exchange