JavaScript页面加载时检测已打开targetWindow状态（刷新后无引用）

这个问题的核心是刷新后主窗口丢失了之前打开的窗口引用，但我们可以利用浏览器对命名窗口的管理机制来恢复引用，同时结合localStorage跟踪窗口的打开状态，严格遵循「必须通过按钮触发打开」的要求。下面是具体的解决方案：

核心思路 #

1. 利用window.open()的命名特性：如果同名窗口已存在，调用window.open('', '窗口名')不会打开新窗口，而是返回已有窗口的引用（只要窗口还未关闭）。
2. 用localStorage存储标记：记录用户是否通过按钮主动打开过窗口，避免页面加载时自动触发窗口打开。
3. 页面加载时尝试恢复引用：如果之前用户打开过窗口且窗口仍在运行，重新获取引用并启动状态检测。

完整代码实现 #

// 全局变量存储窗口引用和定时器
let targetWindowRef = null;
let checkWindowInterval = null;

// 页面加载时尝试恢复窗口引用
window.addEventListener('load', () => {
  // 仅当用户之前通过按钮打开过窗口时，才尝试恢复引用
  const wasWindowOpened = localStorage.getItem('windowOpenedByButton') === 'true';
  if (wasWindowOpened) {
    // 用空URL和目标窗口名获取已有引用，不会打开新窗口
    targetWindowRef = window.open('', 'targetWindow');
    
    // 如果成功获取到未关闭的窗口，启动状态检测
    if (targetWindowRef && !targetWindowRef.closed) {
      startWindowStatusCheck();
    } else {
      // 窗口已关闭，清理标记
      localStorage.removeItem('windowOpenedByButton');
    }
  }
});

// 按钮触发的打开窗口函数
function checkWindow() {
  // 打开窗口或获取已有引用
  targetWindowRef = window.open(
    '_external', 
    'targetWindow', 
    `toolbar=no, location=0, status=no, menubar=no, scrollbars=yes, resizable=yes, width=500px, height=800px`
  );
  
  // 标记窗口是用户主动打开的
  localStorage.setItem('windowOpenedByButton', 'true');
  
  // 启动状态检测定时器
  startWindowStatusCheck();
}

// 启动窗口状态检查的定时器
function startWindowStatusCheck() {
  // 先清理之前的定时器，避免重复
  if (checkWindowInterval) {
    clearInterval(checkWindowInterval);
  }
  
  checkWindowInterval = setInterval(() => {
    // 检查窗口是否已关闭或引用失效
    if (!targetWindowRef || targetWindowRef.closed) {
      clearInterval(checkWindowInterval);
      checkWindowInterval = null;
      // 清理相关存储
      localStorage.removeItem('saved');
      localStorage.removeItem('windowOpenedByButton');
      targetWindowRef = null;
    } else {
      // 处理localStorage的saved逻辑
      const saved = localStorage.getItem('saved');
      if (saved === 'true') {
        localStorage.setItem('saved', 'false');
        // 执行你的其他操作
        // do some other stuff here
      }
    }
  }, 1000);
}

关键细节说明 #

• 引用恢复逻辑：页面加载时，只有windowOpenedByButton标记存在，才尝试获取窗口引用，严格遵循「必须按钮触发打开」的要求。
• 定时器管理：每次启动检查前都会清理旧定时器，避免多个定时器同时运行；窗口关闭后及时清理资源，防止内存泄漏。
• localStorage的字符串处理：因为localStorage只能存储字符串，所以布尔值要以'true'/'false'的形式存储和读取。

注意事项 #

• 同源策略限制：如果targetWindow打开的是跨域页面，主窗口无法直接访问targetWindow.closed属性，此时需要通过postMessage在两个窗口间通信来检测状态。
• 弹窗阻止：确保window.open是由用户的按钮点击事件触发的，否则会被浏览器的弹窗阻止机制拦截，这也是为什么不能自动打开窗口的原因。

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