有没有办法在JavaScript中识别浏览器选项卡？

我需要能够识别我在浏览器中的选项卡。我是否可以从浏览器中获取一些信息来识别标签？我不需要知道任何关于其他标签的信息，我只需要我所在标签的id。它可以是一个随机数或序列号，也可以是一个日期时间戳，只要它在选项卡的生命周期内保持不变

我有一个客户端应用程序，可以通过HTTP连接到远程服务器，如果我在多个选项卡中打开它，每个实例都需要自己的唯一id，否则应用程序就会失败，所以我只需要一些唯一的号码，只要该选项卡存在，就可以与该选项卡关联（即，当我浏览提供此应用程序的网站时，页面刷新后仍然存在的内容）。似乎是一个不需要动脑筋的工具，应该可以在浏览器中使用，比如window.tabId-这就是我所需要的。我有一个严重的开发障碍，因为我无法通过这个看似不存在的简单、简单、简单的解决方案。必须有一种方法（跨浏览器解决方案）

---

有什么想法吗？

您无法使用javascript获取选项卡id，但有一些解决方案可以帮助您在用户打开新选项卡时使用不同的会话/cookie

一些参考：

---

您必须使用html5，但与随机guid相结合似乎是您想要的。

可能的解决方案之一是使用“window.name”属性，但我不想使用它，因为其他人可以使用它

---

我又找到了一个可能的解决方案：使用sessionStorage。它由FF3.5+、Chrome4+、Safari4+、Opera10.5+和IE8+支持。sessionStorage是每个选项卡/窗口的，因此您可以在sessionStorage中定义一个随机数，并首先获取它（如果存在）：

var tabID = sessionStorage.tabID ? sessionStorage.tabID : sessionStorage.tabID = Math.random();

更新：
在某些情况下，您可能在多个选项卡中有相同的会话存储（例如，当您复制选项卡时）。在这种情况下，以下代码可能会有所帮助：

var tabID = sessionStorage.tabID && sessionStorage.closedLastTab !== '2' ? sessionStorage.tabID : sessionStorage.tabID = Math.random();
sessionStorage.closedLastTab = '2';
$(window).on('unload beforeunload', function() {
      sessionStorage.closedLastTab = '1';
});

---

如果用户不可能在2毫秒内打开3个选项卡，则可以使用时间戳并将其存储到window.name中，并将其用作查找中的键。window.name值将保留在选项卡上，直到关闭为止

---

至少对于chrome，从2013年起就有了一个正式的答案：。

因为我没有像windows那样找到简单的Javascript函数。currentTabIndex，所以我写了几行Javascript，在加载每个浏览器选项卡时修复它们的ID

function defineTabID()
    {
    var iPageTabID = sessionStorage.getItem("tabID");
      // if it is the first time that this page is loaded
    if (iPageTabID == null)
        {
        var iLocalTabID = localStorage.getItem("tabID");
          // if tabID is not yet defined in localStorage it is initialized to 1
          // else tabId counter is increment by 1
        var iPageTabID = (iLocalTabID == null) ? 1 : Number(iLocalTabID) + 1;
          // new computed value are saved in localStorage and in sessionStorage
        localStorage.setItem("tabID",iPageTabID);
        sessionStorage.setItem("tabID",iPageTabID);
        }
    }

此代码在

localStorage

中保存最后一个选项卡的索引，以更新新选项卡的当前值，并在

sessionStorage

中修复页面id

---

我必须在我的应用程序的每个页面中调用

defineTabId（）

函数。由于我使用JSF模板开发，这只在一个地方定义：-）

对于这里使用React的任何人，我做了一个鬼鬼祟祟的小钩子：

从'react'导入{useEffect，useMemo}
从“uniqid”导入uniqid
导出常量选项卡\u ID\u键='tabId'
导出默认值（）=>{
const id=useMemo（uniqid，[]）
useffect（（）=>{
if（存储类型！==“未定义”）{
sessionStorage.setItem（选项卡ID键，ID）
}
}，[id]）
返回id
}

把它放在你的基本应用程序/页面组件上，或者放在你知道会一直挂载的地方

它将在装载后运行该效果，并为会话存储中的当前选项卡设置唯一id，该选项卡是特定于该选项卡的存储

---

复制选项卡将为新选项卡获得一个新id，因为组件将再次装载，效果将运行，覆盖上一个选项卡的id

这里有一种方法可以让

tabId

在页面加载后可用-即使在刷新后也具有相同的

tabId

这也解决了重复选项卡的问题，因为

tabId

已从

会话存储中清除

window.addEventListener("beforeunload", function (e)
{
    window.sessionStorage.tabId = window.tabId;

    return null;
});

window.addEventListener("load", function (e)
{
    if (window.sessionStorage.tabId)
    {
        window.tabId = window.sessionStorage.tabId;
        window.sessionStorage.removeItem("tabId");
    }
    else
    {
        window.tabId = Math.floor(Math.random() * 1000000);
    }

    return null;
});

使用
窗口访问
选项卡id
。选项卡id

需要
beforeunload
事件，以便在刷新后保持
tabId
具有相同的可用id

需要加载
事件来：

生成初始的
选项卡ID
刷新后加载相同的
tabId
（如果存在）
*我真的不知道为什么我应该做
返回null
或者根本不返回。请注意，不返回可能会导致函数不工作：（
您可以在服务人员的“fetch”事件处理程序中获取选项卡ID（或clientId）。
如果需要将该clientId发送到页面，只需使用client.postMessage（）

在您的服务人员中：

self.addEventListener("fetch", function(event) {
 event.waitUntil(async function() {

  if (!event.clientId) return;

  const client = await clients.get(event.clientId);

  if (!client) return;

  client.postMessage({
   clientId: event.clientId,
  });

 }());
});

在页面脚本中：

navigator.serviceWorker.addEventListener('message', event => {
 console.log(event.data.clientId);
});

资料来源：
这段代码帮助很大，但复制窗口时数据存储会保持不变会话存储不会在IE中保持不变。随机选取数字并不能确保它们是唯一的（即随机选取一个介于0和99之间的数字，并且可能总是11次）。为什么不在localStorage中使用序列号？即使随机选取，数字也可能出现两次，不是吗？因此两个选项卡可能具有相同的数字。我原以为在localStorage中使用序列号会更好-当您在新选项卡中打开页面时，增加数字并将其存储在sessionStorage中。@MaxWaterman:Difference租用浏览器、专用选项卡、更改时间……串行和随机都是一样的。有多种方法可以创建一个尽可能好的guid——冲突的可能性很小，不值得麻烦。这仅适用于扩展。