Angular中如何检测标签页复制、刷新及标签页间通信

一、核心思路 #

通过浏览器存储API生成唯一标签页ID，结合页面加载行为判断标签页类型（新打开/刷新/复制），再与服务器联动管控活跃标签页数量，避免服务器过载。

二、具体实现方案 #

1. 生成唯一标签页ID并区分标签页类型 #

利用sessionStorage存储标签页ID，结合performance.navigation.type判断页面加载来源——复制标签页时会继承sessionStorage，但加载类型为TYPE_NAVIGATE，据此可识别复制行为并生成新ID：

document.addEventListener('DOMContentLoaded', () => {
  let tabId = sessionStorage.getItem('tabId');
  const navType = performance.navigation.type;
  const EXAM_ID = '当前考试的唯一标识'; // 替换为实际考试ID

  if (!tabId) {
    // 全新标签页：生成ID并上报服务器
    tabId = crypto.randomUUID();
    sessionStorage.setItem('tabId', tabId);
    registerTabToServer(tabId, EXAM_ID);
  } else {
    if (navType === performance.navigation.TYPE_RELOAD) {
      // 刷新页面：通知服务器更新标签页状态
      updateTabStatus(tabId, 'reload');
    } else {
      // 复制的标签页：生成新ID，替换旧ID并通知服务器
      const oldTabId = tabId;
      tabId = crypto.randomUUID();
      sessionStorage.setItem('tabId', tabId);
      replaceTabOnServer(oldTabId, tabId, EXAM_ID);
    }
  }

  // 页面卸载时通知服务器释放资源
  window.addEventListener('beforeunload', () => {
    unregisterTabFromServer(tabId, { keepalive: true });
  });

  // 封装接口请求函数
  function registerTabToServer(tabId, examId) {
    fetch('/api/exam/tabs/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ tabId, examId })
    });
  }

  function updateTabStatus(tabId, action) {
    fetch('/api/exam/tabs/update', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ tabId, action })
    });
  }

  function replaceTabOnServer(oldTabId, newTabId, examId) {
    fetch('/api/exam/tabs/replace', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ oldTabId, newTabId, examId })
    });
  }

  function unregisterTabFromServer(tabId, options) {
    fetch('/api/exam/tabs/unregister', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ tabId }),
      ...options
    });
  }
});

2. 服务器端管控逻辑 #

• 维护每个考生的活跃标签页ID列表，新标签页注册时检查列表长度：
  • 若超过阈值（如1个），返回错误提示，禁止新标签页进入考试
  • 若在阈值内，将新ID加入列表
• 收到标签页卸载请求时，从列表中移除对应的ID
• 定时清理超时的标签页ID（处理用户直接关闭浏览器未触发beforeunload的情况）

3. 兼容性与优化点 #

• 若需兼容旧浏览器，替换crypto.randomUUID()为自定义UUID生成函数：

function generateUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

• 使用keepalive: true确保页面卸载时请求能成功发送
• 可通过BroadcastChannel通知同域名下的其他标签页，当检测到复制行为时，提示用户关闭多余标签页（可选，需权衡用户体验）

内容的提问来源于stack exchange，提问作者Hung Anh Nguyen