如何用原生ES6 JavaScript检测本站打开的标签页数量？

一、简单方案：判断是否存在多个标签页（布尔值结果） #

如果只需要知道当前网站是否有多个标签页打开，这个轻量方案就能满足需求：

原理是借助localStorage的跨标签页通信特性，搭配页面可见性API来追踪标签页状态：

// 生成当前标签页的唯一标识
const tabId = Date.now() + Math.random();
const storageKey = `activeTab_${location.origin}`;

// 页面加载时标记当前标签页
localStorage.setItem(storageKey, tabId);

// 监听其他标签页的存储变化
window.addEventListener('storage', (e) => {
  if (e.key === storageKey && e.newValue !== tabId) {
    console.log('当前网站存在其他打开的标签页');
    // 这里可以触发你的业务逻辑，比如显示提示UI
  }
});

// 页面隐藏时移除标记，避免残留无效数据
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    localStorage.removeItem(storageKey);
  } else {
    localStorage.setItem(storageKey, tabId);
  }
});

这个方案的小局限是：只能判断是否存在至少一个其他标签页，无法获取具体数量。

二、进阶方案：获取准确的标签页数量 #

如果需要实时拿到具体的标签页数量，可以用Broadcast Channel API实现标签页间的主动通信，每个标签页上线时注册、下线时注销，同步计数：

// 创建专属广播频道，用网站origin命名避免跨站干扰
const channel = new BroadcastChannel(`tabCounter_${location.origin}`);
let tabCount = 1; // 当前标签页默认算1个

// 监听其他标签页的消息
channel.addEventListener('message', (e) => {
  switch(e.data.type) {
    case 'NEW_TAB':
      // 新标签页上线，计数+1
      tabCount++;
      console.log(`当前网站打开的标签页数量：${tabCount}`);
      // 给新标签页同步最新总数
      channel.postMessage({ type: 'COUNT_UPDATE', count: tabCount });
      break;
    case 'COUNT_UPDATE':
      // 同步其他标签页发来的最新计数
      tabCount = e.data.count;
      console.log(`当前网站打开的标签页数量：${tabCount}`);
      break;
    case 'TAB_CLOSED':
      // 有标签页关闭，计数-1
      tabCount--;
      console.log(`当前网站打开的标签页数量：${tabCount}`);
      break;
  }
});

// 页面加载完成后，通知所有其他标签页：新标签页上线
window.addEventListener('load', () => {
  channel.postMessage({ type: 'NEW_TAB' });
});

// 页面卸载前，通知其他标签页：当前标签页即将关闭
window.addEventListener('beforeunload', () => {
  channel.postMessage({ type: 'TAB_CLOSED' });
  channel.close();
});

这个方案的优势：

• 能实时获取准确的标签页数量
• 用Broadcast Channel直接通信，比localStorage更高效，无存储残留问题
• 所有标签页都能同步到最新计数

注意事项 #

1. 两种方案都受浏览器同源策略限制，只有同一域名、协议、端口下的标签页才能被检测到，这是浏览器的安全机制，无法绕过。
2. Broadcast Channel API支持绝大多数现代浏览器（Chrome 54+、Firefox 38+、Edge 79+），如果需要兼容极旧浏览器，可以用localStorage模拟类似通信逻辑，但实现会更复杂。
3. 若页面通过iframe嵌入，需注意同源限制：iframe与父页面同源可正常工作，跨域则不行。

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