如何可靠检测浏览器中是否已打开同一页面的其他实例？

可靠检测浏览器中同一页面其他实例的方法 #

这个问题确实挺头疼的——移动端浏览器的unload事件触发不稳定是出了名的，靠它来更新localStorage状态很容易留下“幽灵实例”标记。我整理了几个更靠谱的方案，你可以根据场景选：

1. Broadcast Channel API（首推） #

这是浏览器原生的跨页面通信API，专门用来解决同源页面之间的消息传递问题，完全不需要依赖unload事件，可靠性拉满。

原理很简单：每个页面实例创建一个同名的广播频道，当新页面加载完成后，向频道发送一条“我上线了”的消息；其他已打开的页面收到消息后，就知道有新实例存在，反之也可以通过监听频道消息来追踪实例的在线状态。

示例代码：

// 创建广播频道
const channel = new BroadcastChannel('page-instance-check');

// 监听其他页面的消息
channel.addEventListener('message', (e) => {
  if (e.data.type === 'INSTANCE_ONLINE') {
    console.log('检测到同一页面的其他实例！');
    // 这里可以做你需要的逻辑，比如显示提示、限制操作等
  }
});

// 页面加载完成后，向频道发送上线消息
window.addEventListener('load', () => {
  channel.postMessage({ type: 'INSTANCE_ONLINE' });
});

// 页面关闭前发送下线消息（虽然unload不稳定，但聊胜于无）
window.addEventListener('beforeunload', () => {
  channel.postMessage({ type: 'INSTANCE_OFFLINE' });
});

这个方案的优势是简单、无额外依赖，而且现代浏览器（包括移动端主流浏览器）都支持，唯一的限制是必须同源。

2. Service Worker + Client API #

如果你的项目已经用到了Service Worker，那这个方案会更强大——Service Worker可以作为所有页面实例的“管理者”，直接获取当前所有活跃的同源页面列表。

原理：Service Worker能通过clients.matchAll()方法获取所有已打开的客户端页面，页面可以通过向Service Worker发送消息，查询当前的实例数量。

示例代码：

页面端：

// 注册Service Worker（如果还没注册）
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(registration => {
    // 向Service Worker发送查询请求
    registration.active.postMessage({ type: 'GET_INSTANCE_COUNT' });
  });
}

// 监听Service Worker的回复
navigator.serviceWorker.addEventListener('message', (e) => {
  if (e.data.type === 'INSTANCE_COUNT') {
    if (e.data.count > 1) {
      console.log(`当前有${e.data.count}个页面实例在运行`);
    }
  }
});

Service Worker端（sw.js）：

self.addEventListener('message', async (e) => {
  if (e.data.type === 'GET_INSTANCE_COUNT') {
    // 获取所有同源的活跃页面
    const clients = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
    // 向发起请求的页面回复数量
    e.source.postMessage({ type: 'INSTANCE_COUNT', count: clients.length });
  }
});

这个方案的优势是能精准统计所有实例，哪怕页面在后台运行也能检测到，但需要配置Service Worker，且要求站点使用HTTPS（localhost环境除外）。

3. 改进版LocalStorage方案（兼容旧浏览器） #

如果需要兼容一些老浏览器，那可以给原来的LocalStorage方案打补丁，用visibilitychange事件替代不可靠的unload：

原理：当页面切换到后台（比如用户打开新页面、切换App）时，会触发visibilitychange事件，此时可以更新LocalStorage中的状态；同时每个页面定期发送“心跳”更新时间戳，其他页面通过检查时间戳来判断实例是否还活跃。

示例代码：

const INSTANCE_KEY = 'page-instance-timestamps';
const INSTANCE_ID = Date.now(); // 给当前实例分配唯一ID

// 更新心跳
function updateHeartbeat() {
  let timestamps = JSON.parse(localStorage.getItem(INSTANCE_KEY)) || {};
  timestamps[INSTANCE_ID] = Date.now();
  localStorage.setItem(INSTANCE_KEY, JSON.stringify(timestamps));
}

// 检查其他实例是否活跃
function checkOtherInstances() {
  let timestamps = JSON.parse(localStorage.getItem(INSTANCE_KEY)) || {};
  const now = Date.now();
  // 过滤掉超过30秒没有心跳的实例（认为已关闭）
  const activeInstances = Object.keys(timestamps).filter(id => now - timestamps[id] < 30000);
  if (activeInstances.length > 1) {
    console.log('检测到其他活跃实例');
  }
}

// 页面可见时启动心跳，隐藏时更新最后状态
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    updateHeartbeat();
    // 定时更新心跳，比如每10秒一次
    setInterval(updateHeartbeat, 10000);
  } else {
    updateHeartbeat(); // 最后更新一次状态
  }
});

// 页面加载时检查实例
window.addEventListener('load', () => {
  updateHeartbeat();
  checkOtherInstances();
  // 监听LocalStorage变化，实时检测其他实例
  window.addEventListener('storage', (e) => {
    if (e.key === INSTANCE_KEY) {
      checkOtherInstances();
    }
  });
});

这个方案兼容性更好，但需要处理心跳过期的逻辑，相比前两种会复杂一点。

注意事项 #

• 所有方案都受同源策略限制，不同域名的页面无法互相检测；
• 部分浏览器的隐私模式会隔离LocalStorage或Broadcast Channel，测试时要覆盖这些场景；
• 如果是单页应用（SPA），要注意路由变化时的状态更新，避免误判。

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