WebForms下浏览器直接复制标签页的检测方法咨询

要区分复制现有标签页创建的页面和新建标签页打开同一URL的页面，核心是利用浏览器复制标签页时的两个特性：

1. 会完整复制原标签页的sessionStorage数据
2. 新页面无需从服务器加载资源，也不会触发原页面的卸载流程

以下是可靠的实现代码：

window.addEventListener('load', () => {
  const storageKey = 'uniqueTabId';
  const storedTabId = sessionStorage.getItem(storageKey);
  const navEntry = performance.getEntriesByType('navigation')[0];

  if (!storedTabId) {
    // 新建标签页打开URL，首次加载
    sessionStorage.setItem(storageKey, crypto.randomUUID());
    console.log('此页面为新建标签页加载，非复制标签页');
  } else {
    // 存在存储的ID，判断是复制标签页还是手动刷新
    // 复制标签页的特征：导航类型为reload，且未触发卸载流程（unloadEventStart为0）
    if (navEntry.type === 'reload' && navEntry.unloadEventStart === 0) {
      console.log('此页面为复制标签页创建');
      // 这里可添加自定义处理逻辑，比如重置ViewState等
    } else {
      // 手动刷新页面，更新存储的ID
      sessionStorage.setItem(storageKey, crypto.randomUUID());
      console.log('此页面为手动刷新');
    }
  }
});

关键逻辑说明 #

• sessionStorage 标识：首次加载时生成唯一ID存入sessionStorage，新建标签页打开同一URL时sessionStorage为空，复制标签页则会继承原标签页的ID。
• 导航事件判断：
  • navEntry.type === 'reload'：复制标签页和手动刷新都会触发此类型导航
  • navEntry.unloadEventStart === 0：复制标签页是直接从原标签页内存复制，不会触发原页面的卸载，因此该值为0；而手动刷新会先卸载当前页面，该值会大于0，以此区分两种场景。

为什么隐藏输入框方案不可靠 #

隐藏输入框属于DOM元素，复制标签页时浏览器可能会重新解析页面HTML，导致输入框回到服务器渲染的初始值（空字符串），而sessionStorage是浏览器会话级存储，复制标签页会完整继承其数据，不会出现间歇性重置的问题。

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