Question

我需要能够识别浏览器中的标签。我是否可以通过浏览器获取一些信息来识别标签？我不需要知道任何其他选项卡，我只需要我所在选项卡的ID。它可以是随机或顺序编号，或日期时间戳，只要它保持相同的标签的生命。

我有一个客户端应用程序通过HTTP连接到远程服务器进行BOSH，如果我在多个选项卡中打开它，每个实例都需要自己唯一的ID或应用程序失败，所以我只需要一些唯一的数字只要该选项卡存在，就会与选项卡关联（即，当我浏览提供此应用程序的网站时，页面刷新后仍能存活）。看起来像是在浏览器中可以使用的明智之举，比如window.tabId - 这就是我所需要的。我有一个严肃的开发块，因为我无法通过这个似乎不存在的简单，简单，简单的解决方案。必须有一种方法（跨浏览器解决方案）。

有什么想法吗？

Answer 1

SessionStorage是每个标签/窗口，因此您可以在sessionStorage中定义一个随机数，如果存在则首先获取它：

$ valgrind ./bin/fscanf_array_dyn dat/100int.txt
==7273== Memcheck, a memory error detector
==7273== Copyright (C) 2002-2013, and GNU GPL'd, by Julian Seward et al.
==7273== Using Valgrind-3.10.1 and LibVEX; rerun with -h for copyright info
==7273== Command: ./bin/fscanf_array_dyn dat/100int.txt
==7273==
 array[  0] : 27086
 array[  1] : 29317
 array[  2] : 32736
...
 array[ 97] : 16892
 array[ 98] : 8270
 array[ 99] : 6444
==7273==
==7273== HEAP SUMMARY:
==7273==     in use at exit: 0 bytes in 0 blocks
==7273==   total heap usage: 3 allocs, 3 frees, 1,336 bytes allocated
==7273==
==7273== All heap blocks were freed -- no leaks are possible
==7273==
==7273== For counts of detected and suppressed errors, rerun with: -v
==7273== ERROR SUMMARY: 0 errors from 0 contexts (suppressed: 1 from 1)

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

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

Answer 2

你必须使用html5，但sessionStorage结合随机guid似乎就是你想要的。

Answer 3

您无法使用javascript获取标签ID，但是有一些解决方案可以帮助您在用户打开新标签时使用不同的会话/ Cookie。

一些参考：

Get Browser Tab Index/Id

get urls of firefox tabs from firefox extension

How to differ sessions in browser-tabs?

Get a unique session in each browser tab

asp.net - session - multiple browser tabs - different sessions?

Answer 4

这是在页面加载后使tabId可用的一种方法-即使刷新后也具有相同的tabId。

由于从tabId中清除了sessionStorage，因此还解决了重复标签的问题。

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;
});

使用tabId访问window.tabId。

需要beforeunload事件，以使tabId保持刷新后具有相同的ID。

load事件需要用于：

生成初始的tabId。
刷新后加载相同的tabId-如果存在。

*我真的不知道为什么我应该做return null或根本不回来。刚刚读到，不返回可能会导致该功能不起作用：（

Answer 5

由于我没有找到像shouldComponentUpdate = (nextProps, nextState) => { let arePropsEqual = isEqual(this.props, nextProps) let isStateEqual = isEqual(this.state,nextState) if(arePropsEqual && isStateEqual){ return false } return true }这样的简单Javascript函数，因此我写了几行Javascript来修复每个浏览器选项卡在加载时的ID。

windows.currentTabIndex

此代码将最后一个标签的索引保存在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中以修复页面的ID！

我必须在应用程序的每一页中调用sessionStorage函数。由于我使用JSF模板进行开发，因此只能在一个地方定义：-）

Answer 6

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

我找到了另一个可能的解决方案：使用sessionStorage。它支持FF3.5 +，Chrome4 +，Safari4 +，Opera10.5 +和IE8 +。

Answer 7

如果用户没有在2毫秒内打开3个标签的几率，可以使用时间戳并将其存储到window.name中，并将其用作查找中的键。 window.name值将保留在选项卡中，直到它关闭。

Timestamp

Answer 8

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

c(1,1,2,3,3)

将此内容放置在基本的App / Page组件上，或者将始终安装在您知道的位置。

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

复制选项卡将为您提供新选项卡的新ID，因为该组件将再次安装并且效果将运行，并覆盖前一个选项卡的ID

Answer 9

您可以在 Service Worker 的“fetch”事件处理程序中获取选项卡 ID（或 clientId）。如果您需要将该 clientId 发送到您的页面，只需使用 client.postMessage()。

在您的 Service Worker 中：

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);
});

来源： Client.postMessage()

Answer 10

至少对于chrome，自2013年以来有一个官方答案：chrome.tabs API。

有没有办法识别JavaScript中的浏览器标签？

10 个答案: