如何通过窗口名称引用已打开窗口，实现postMessage跨窗口通信？

核心问题分析 #

你遇到的window.open('', 'myName')返回null的问题，本质是浏览器的安全限制：只有当窗口是当前脚本主动触发（比如用户点击事件内）打开的，或者属于同一脚本上下文，才能拿到有效窗口引用。如果是用户手动打开的标签页、其他脚本打开的窗口，直接通过名称调用window.open无法获取引用，会返回null。

针对性解决方案 #

1. 脚本主动打开的窗口：保留引用直接通信 #

如果窗口是你的脚本在用户交互（比如点击按钮）中打开的，直接保存窗口引用即可：

// 保存全局引用（确保不会被垃圾回收）
let targetWindow;

// 在用户点击事件内执行打开操作
document.querySelector('#open-target-tab').addEventListener('click', () => {
  // 传入目标URL和窗口名称
  targetWindow = window.open('https://your-trusted-domain.com/target-page', 'myName');
});

// 后续需要通信时直接使用引用
function sendMessageToTarget() {
  if (targetWindow && !targetWindow.closed) {
    // 生产环境不要用*，指定具体可信域名
    targetWindow.postMessage(
      {e: 123, f: 456, g: 789},
      'https://your-trusted-domain.com'
    );
  }
}

2. 非脚本主动打开的窗口：广播+标识匹配 #

对于用户手动打开、其他上下文打开的窗口，无法直接获取引用，需要用广播消息+窗口标识匹配的方式：

步骤1：每个窗口初始化时设置名称

在所有需要参与通信的页面中，加载时设置窗口名称：

// 页面加载时设置窗口名称，确保唯一标识
window.name = 'myName'; // 每个窗口设置对应的名称

步骤2：发送方广播目标消息

发送方通过window.postMessage广播消息，携带目标窗口的名称标识：

function sendTargetedMessage() {
  // 广播消息，限定可信域名范围（不要用*）
  window.postMessage(
    {
      type: 'TARGETED_MSG',
      targetName: 'myName',
      data: {e: 123, f: 456, g: 789}
    },
    'https://*.your-company.com' // 匹配所有公司子域名，或列出具体域名
  );
}

步骤3：接收方监听并验证消息

每个窗口监听message事件，验证来源并判断是否是发给自己的消息：

window.addEventListener('message', (event) => {
  // 第一步：验证消息来源，只处理可信域名的消息
  const trustedOrigins = [
    'https://domain1.your-company.com',
    'https://domain2.your-company.com'
  ];
  if (!trustedOrigins.includes(event.origin)) return;

  // 第二步：判断消息是否是发给当前窗口的
  if (event.data.type === 'TARGETED_MSG' && event.data.targetName === window.name) {
    // 处理收到的消息
    console.log('收到目标消息：', event.data.data);
    // 这里添加你的业务逻辑
  }
});

3. 多CORS域名场景注意事项 #

• 绝对不要在生产环境用*作为目标源，必须指定可信域名列表或通配符（如https://*.your-company.com），防止恶意网站接收消息。
• 接收方必须严格验证event.origin，拒绝非可信来源的消息，避免XSS攻击。
• 如果跨域窗口需要回复消息，接收方可以通过event.source.postMessage()发送回复，同样要指定目标源。

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