window.close()意外关闭双标签页的问题求助

你当前代码中调用window.parent.close()存在窗口对象指向错误的风险：在部分嵌套场景或浏览器环境下，window.parent可能意外指向原标签页的顶层窗口，而非新开的认证标签页，导致执行close时误关原标签页。

1. 明确关闭目标：操作认证标签页的顶层窗口 #

在iframe中，通过window.top获取当前认证标签页的顶层窗口（而非window.parent），确保关闭的是新开的认证标签页：

if (window.top.opener && !window.top.opener.closed) {
  const data = {
    "for": "mywindow", 
    "operation": "navigate",
    "code": this.code, 
    "state": this.state
  };
  // 指定目标origin提升安全性，替换为你的站点域名
  window.top.opener.postMessage(data, 'https://your-domain.com');
  // 关闭当前认证标签页的顶层窗口
  window.top.close();
}

2. 增强校验逻辑，避免误操作 #

增加多重校验，明确当前窗口是原标签页打开的子窗口，且原标签页仍处于打开状态：

if (window.top.opener && !window.top.opener.closed && window.top !== window.top.opener) {
  const data = {
    "for": "mywindow", 
    "operation": "navigate",
    "code": this.code, 
    "state": this.state
  };
  window.top.opener.postMessage(data, 'https://your-domain.com');
  window.top.close();
}

3. 确保消息发送完成后再关闭窗口 #

部分浏览器中，若在postMessage未完成时关闭窗口，可能导致消息未送达或触发异常。可通过延迟关闭确保消息传递：

if (window.top.opener && !window.top.opener.closed && window.top !== window.top.opener) {
  const data = {
    "for": "mywindow", 
    "operation": "navigate",
    "code": this.code, 
    "state": this.state
  };
  window.top.opener.postMessage(data, 'https://your-domain.com');
  // 延迟100ms关闭，确保消息已发送
  setTimeout(() => {
    window.top.close();
  }, 100);
}

• 同源政策：确保原标签页和认证标签页处于同源（或配置正确的跨域消息接收逻辑），否则postMessage可能无法触发原标签页的导航。
• 浏览器隐私设置：部分隐私模式会阻止opener属性传递，导致window.top.opener为null，此时需提供手动关闭提示（比如引导用户点击按钮关闭标签页）。

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