如何实现浏览器重复打开页面时跳转至原窗口（仿WhatsApp Web）

要实现类似WhatsApp Web的重复窗口处理逻辑，核心思路是通过浏览器本地存储（localStorage）跟踪窗口状态，结合窗口事件和跨窗口通信完成跳转与窗口管理，以下是具体实现代码和说明：

核心逻辑步骤 #

• 以页面URL作为唯一标识，存储当前活跃窗口的状态
• 页面加载时检查是否已有活跃窗口：
  • 若存在，新窗口尝试关闭自身，并触发原窗口聚焦
  • 若不存在，将当前窗口标记为活跃窗口，监听窗口激活/关闭事件更新状态

JavaScript实现代码 #

// 以当前页面URL为键，确保不同页面独立处理
const storageKey = `activeWindow_${window.location.href}`;
// 生成当前窗口的唯一ID，用于区分不同窗口实例
const currentWindowId = Date.now() + Math.random().toString(36).slice(2, 11);

window.addEventListener('load', () => {
  const storedWindowData = JSON.parse(localStorage.getItem(storageKey));

  if (storedWindowData && storedWindowData.isActive) {
    // 已有活跃窗口，尝试关闭当前窗口
    try {
      window.close();
    } catch (error) {
      // 浏览器限制无法关闭时，显示提示信息
      document.body.innerHTML = `
        <div style="text-align: center; margin: 50px auto; max-width: 400px; font-family: sans-serif;">
          <h3>该页面已在其他窗口打开</h3>
          <p>请切换至已打开的窗口继续操作</p>
        </div>
      `;
    }
    // 触发原窗口聚焦事件
    localStorage.setItem(`${storageKey}_focusSignal`, Date.now().toString());
  } else {
    // 注册当前窗口为活跃状态
    localStorage.setItem(storageKey, JSON.stringify({
      windowId: currentWindowId,
      isActive: true
    }));

    // 监听窗口聚焦/失焦，更新活跃状态
    window.addEventListener('focus', () => {
      const data = JSON.parse(localStorage.getItem(storageKey));
      if (data?.windowId === currentWindowId) {
        data.isActive = true;
        localStorage.setItem(storageKey, JSON.stringify(data));
      }
    });

    window.addEventListener('blur', () => {
      const data = JSON.parse(localStorage.getItem(storageKey));
      if (data?.windowId === currentWindowId) {
        data.isActive = false;
        localStorage.setItem(storageKey, JSON.stringify(data));
      }
    });

    // 监听其他窗口发送的聚焦信号，触发当前窗口聚焦
    window.addEventListener('storage', (event) => {
      if (event.key === `${storageKey}_focusSignal`) {
        window.focus();
        localStorage.removeItem(`${storageKey}_focusSignal`);
      }
    });

    // 窗口关闭时，清除本地存储的状态
    window.addEventListener('beforeunload', () => {
      const data = JSON.parse(localStorage.getItem(storageKey));
      if (data?.windowId === currentWindowId) {
        localStorage.removeItem(storageKey);
      }
    });
  }
});

关键细节说明 #

• 跨窗口通信：通过localStorage的storage事件实现不同窗口间的消息传递，触发原窗口聚焦
• 窗口唯一ID：避免同一页面的不同窗口实例互相干扰，确保状态更新只针对当前窗口
• 浏览器兼容性：部分浏览器限制非JS打开的窗口调用window.close()，因此添加了降级提示方案
• 状态清理：窗口关闭时清除本地存储的状态，避免下次打开页面时误判

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