Angular中关闭父窗口时如何同步关闭子窗口？

问题分析 #

你当前的代码在多数场景有效，但关闭最后一个父窗口时失效，核心原因是：

• beforeunload中阻止默认行为（e.preventDefault()和e.returnValue = false）会干扰浏览器的关闭流程，导致后续unload事件的执行优先级被降低
• 当关闭浏览器最后一个窗口时，浏览器会快速释放资源，unload事件的执行环境可能被提前终止，无法完成子窗口关闭操作；调试时浏览器会放慢流程，所以能正常执行

修正方案 #

1. 移除beforeunload的阻止操作：如果你的需求只是关闭子窗口，不需要阻止父窗口关闭，这一步是关键
2. 替换unload为pagehide事件：pagehide是HTML5引入的事件，在页面隐藏（包括窗口关闭、导航离开）时触发，比unload更稳定，尤其是在最后一个窗口关闭的场景下

修改后的代码：

@HostListener('window:pagehide', ['$event'])
onPageHide(e: any) {
    if (this.childWindow && !this.childWindow.closed) {
        this.childWindow.close();
    }
}

// 若不需要用户提示，可直接删除beforeunload监听；若需提示则保留以下逻辑
@HostListener('window:beforeunload', ['$event'])
beforeUnload(e: any) {
    if (this.childWindow && !this.childWindow.closed) {
        e.returnValue = '关闭窗口会同时关闭子窗口，确定继续吗？';
    }
}

额外注意事项 #

• 确保子窗口是通过**同源的window.open()**创建的，跨域情况下浏览器会禁止父窗口关闭子窗口
• 部分浏览器的隐私安全设置可能限制window.close()的调用，这种情况下可以在子窗口中添加监听，主动检测父窗口状态后自行关闭：

  // 子窗口中的代码
  window.addEventListener('visibilitychange', () => {
      if (document.hidden && !window.opener) {
          window.close();
      }
  });
  

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