如何实现window.open仅打开一次窗口并检测窗口关闭状态？

你可以通过保存window.open()返回的窗口实例，结合监听窗口的关闭事件来实现需求，具体步骤如下：

1. 定义窗口实例变量 #

在组件类中声明一个变量来存储打开的窗口引用：

private bxsWindow: Window | null = null;

2. 修改bxs()方法 #

点击按钮时先检查窗口实例是否存在且未关闭：

bxs(): void {
  // 检查窗口是否已打开且未关闭
  if (this.bxsWindow && !this.bxsWindow.closed) {
    alert('窗口已打开，请不要重复点击'); // 替换为你需要的错误提示方式
    return;
  }

  // 打开新窗口并保存引用
  this.bxsWindow = window.open(url, "bxs");
  
  // 监听窗口关闭事件，重置引用
  if (this.bxsWindow) {
    this.bxsWindow.onunload = () => {
      this.bxsWindow = null;
    };
  }
}

为什么sessionStorage方案不适用？ #

sessionStorage只能存储静态状态，无法自动感知窗口的关闭动作——当用户手动关闭窗口时，sessionStorage里的状态不会自动更新，导致下次点击按钮时依然认为窗口还在打开状态，这就是你之前遇到的问题。

跨域场景的补充处理 #

如果打开的是跨域URL，由于浏览器同源策略限制，onunload事件可能无法正常触发，这时候可以通过定时检查窗口的closed属性来处理：

bxs(): void {
  if (this.bxsWindow && !this.bxsWindow.closed) {
    alert('窗口已打开，请不要重复点击');
    return;
  }

  this.bxsWindow = window.open(url, "bxs");
  
  // 定时检查窗口状态
  if (this.bxsWindow) {
    const checkInterval = setInterval(() => {
      if (this.bxsWindow?.closed) {
        this.bxsWindow = null;
        clearInterval(checkInterval);
      }
    }, 1000); // 每秒检查一次，可根据需求调整间隔
  }
}

注意：定时检查会消耗少量性能，间隔不宜设置过短。

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