Chrome中未关闭子窗口，child.closed属性却意外变为true

问题原因 #

你遇到的问题是浏览器同源策略限制导致的：当子窗口跳转到与父窗口不同源的地址（比如你的父窗口和localhost:5001端口不同），浏览器会禁止父窗口访问子窗口的内部属性，此时child.closed会被强制返回true，甚至child对象可能变为null，即使子窗口实际并未关闭。

解决方案 #

方案1：确保同源访问 #

如果可以调整服务部署，让父页面和认证页面（http://localhost:5001/auth/google）处于同一域名+端口下，同源环境下你的原始代码就能正常工作，不会出现closed属性误判的情况。

方案2：跨域场景用postMessage通信 #

跨域时，通过子窗口主动向父窗口发送消息的方式来同步状态，绕过同源限制：

父窗口代码

var child = window.open(
  "http://localhost:5001/auth/google",
  "",
  "location=yes,status=yes,width=1366,height=768"
);

// 监听子窗口发来的消息
window.addEventListener('message', function(e) {
  // 验证消息来源，只处理信任域名的消息
  if (e.origin === 'http://localhost:5001') {
    if (e.data === 'windowClosed' || e.data === 'authFinished') {
      clearInterval(clearTimeout); // 清除之前的定时器
      console.log('子窗口已关闭或认证完成');
      // 这里可以添加后续逻辑，比如刷新页面、获取认证结果等
    }
  }
});

// 保留原定时器做兜底（可选）
const clearTimeout = setInterval(() => {
  if (!child || child.closed) {
    clearInterval(clearTimeout);
    console.log('子窗口已关闭');
  }
}, 1000);

子窗口代码（在auth/google页面中）

在认证流程完成后，或者窗口关闭前，向父窗口发送消息：

// 认证完成时发送消息
function onAuthSuccess() {
  if (window.opener) {
    // 第二个参数填父窗口的域名，确保消息安全发送
    window.opener.postMessage('authFinished', 'http://父窗口的域名');
    // 可选：完成后关闭子窗口
    window.close();
  }
}

// 监听窗口关闭事件，发送兜底消息
window.addEventListener('beforeunload', function() {
  if (window.opener) {
    window.opener.postMessage('windowClosed', 'http://父窗口的域名');
  }
});

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