blocks|key|1941467|text|你不能用javascript获取标签id，但是有一些解决方案可以帮助你，比如当用户打开新标签时，使用不同的会话/cookie。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1941468|一些参考：|1941469|Get+Browser+Tab+Index/Id|offset|length|1941470|get+urls+of+firefox+tabs+from+firefox+extension|1941471|How+to+differ+sessions+in+browser-tabs?|1941472|Get+a+unique+session+in+each+browser+tab|1941473|asp.net+-+session+-+multiple+browser+tabs+-+different+sessions?|1941474|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4510454/get-browser-tab-index-id|1|https://stackoverflow.com/questions/1028630/get-urls-of-firefox-tabs-from-firefox-extension|2|https://stackoverflow.com/questions/368653/how-to-differ-sessions-in-browser-tabs|3|http://blog.gauffin.org/2012/02/get-a-unique-session-in-each-browser-tab/|4|https://stackoverflow.com/questions/2840615/asp-net-session-multiple-browser-tabs-different-sessions^0|0|0|0|O|0|0|0|1B|1|0|0|13|2|0|0|14|3|0|0|1R|4|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@$F|18|G|19|1|1A]]|A|$]]|$1|H|3|I|5|6|7|1B|8|@]|9|@$F|1C|G|1D|1|1E]]|A|$]]|$1|J|3|K|5|6|7|1F|8|@]|9|@$F|1G|G|1H|1|1I]]|A|$]]|$1|L|3|M|5|6|7|1J|8|@]|9|@$F|1K|G|1L|1|1M]]|A|$]]|$1|N|3|O|5|6|7|1N|8|@]|9|@$F|1O|G|1P|1|1Q]]|A|$]]|$1|P|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]|X|$5|S|T|U|A|$V|Y]]|Z|$5|S|T|U|A|$V|10]]|11|$5|S|T|U|A|$V|12]]|13|$5|S|T|U|A|$V|14]]]]

You can not get tab id with javascript, how ever there is some solution that can help you with like using different session / cookies when user open new tab.

Some reference:

<a href="https://stackoverflow.com/questions/4510454/get-browser-tab-index-id">Get Browser Tab Index/Id</a>

<a href="https://stackoverflow.com/questions/1028630/get-urls-of-firefox-tabs-from-firefox-extension">get urls of firefox tabs from firefox extension</a>

<a href="https://stackoverflow.com/questions/368653/how-to-differ-sessions-in-browser-tabs">How to differ sessions in browser-tabs?</a>

<a href="http://blog.gauffin.org/2012/02/get-a-unique-session-in-each-browser-tab/" rel="nofollow noreferrer">Get a unique session in each browser tab</a>

<a href="https://stackoverflow.com/questions/2840615/asp-net-session-multiple-browser-tabs-different-sessions">asp.net - session - multiple browser tabs - different sessions?</a>

blocks|key|4052203|text|您必须使用html5，但是sessionStorage与随机guid的组合似乎就是您想要的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4052204|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web-toolkit/doc/latest/DevGuideHtml5Storage^0|D|E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You have to be using html5, but <a href="https://developers.google.com/web-toolkit/doc/latest/DevGuideHtml5Storage" rel="noreferrer">sessionStorage</a> combined with a random guid would seem to be what you want.

blocks|key|1587891|text|一种可能的解决方案是使用"window.name“属性，但我不想使用它，因为其他人可以使用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1587892|我发现了另一个可能的解决方案:使用sessionStorage。它受到FF3.5%2B、Chrome4%2B、Safari4%2B、Opera10.5%2B和IE8%2B的支持。|1587893|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

One of the possible solutions is using "window.name" property, but I do not want to use it because somebody else can use it.

I found one more possible solution: using sessionStorage. It supported by FF3.5+, Chrome4+, Safari4+, Opera10.5+, and IE8+.

blocks|key|4052276|text|SessionStorage是针对每个选项卡/窗口的，因此您可以在sessionStorage中定义一个随机数，如果存在，则首先获取它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4052277|var+tabID+=+sessionStorage.tabID+?+
++++++++++++sessionStorage.tabID+:+
++++++++++++sessionStorage.tabID+=+Math.random();|code-block|syntax|javascript|4052278|更新|offset|length|style|BOLD|4052279|在某些情况下，您可能在多个选项卡中具有相同的sessionStorage+(例如，当您复制选项卡时)。在这种情况下，以下代码可能会有所帮助：|4052280|var+tabID+=+sessionStorage.tabID+&&+
++++++++++++sessionStorage.closedLastTab+!==+'2'+?+
++++++++++++sessionStorage.tabID+:+
++++++++++++sessionStorage.tabID+=+Math.random();
sessionStorage.closedLastTab+=+'2';
$(window).on('unload+beforeunload',+function()+{
++++++sessionStorage.closedLastTab+=+'1';
});|4052281|entityMap^0|0|0|0|2|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

SessionStorage is per tab/window, so you can define a random number in sessionStorage and get it at first if exists:
<pre><code>var tabID = sessionStorage.tabID ? 
 sessionStorage.tabID : 
 sessionStorage.tabID = Math.random();
</code></pre>
UPDATE: 
In some cases, you may have same sessionStorage in multiple tab (e.g. when you duplicate tab). In that case, following code may help:
<pre><code>var tabID = sessionStorage.tabID &amp;&amp; 
 sessionStorage.closedLastTab !== '2' ? 
 sessionStorage.tabID : 
 sessionStorage.tabID = Math.random();
sessionStorage.closedLastTab = '2';
$(window).on('unload beforeunload', function() {
 sessionStorage.closedLastTab = '1';
});
</code></pre>

blocks|key|5470811|text|如果用户在2毫秒内打开3个选项卡的可能性不大，可以使用时间戳并将其存储到window.name中，并将其用作查找中的关键字。在关闭选项卡之前，window.name值将一直保留在选项卡上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5470812|Timestamp|offset|length|5470813|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/221294/how-do-you-get-a-timestamp-in-javascript^0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

If there isn't any odds of a user opening 3 tabs within 2 milliseconds, could use a timestamp and store that into window.name and use that as the key in your lookup. The window.name value will stay with the tab until it is closed. 

<a href="https://stackoverflow.com/questions/221294/how-do-you-get-a-timestamp-in-javascript">Timestamp</a>

blocks|key|1941654|text|至少对于chrome来说，自2013年以来，官方已经有了一个答案：chrome.tabs+API。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1941655|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.chrome.com/extensions/tabs^0|X|F|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

At least for chrome, there's an official answer since 2013: <a href="https://developer.chrome.com/extensions/tabs" rel="nofollow noreferrer">chrome.tabs API</a>.

blocks|key|1587946|text|因为我没有找到像windows.currentTabIndex这样简单的Javascript函数，所以我编写了几行Javascript，以便在加载每个浏览器选项卡时固定它们上的ID。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1587947|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)+%2B+1;
++++++++++//+new+computed+value+are+saved+in+localStorage+and+in+sessionStorage
++++++++localStorage.setItem("tabID",iPageTabID);
++++++++sessionStorage.setItem("tabID",iPageTabID);
++++++++}
++++}|code-block|syntax|javascript|1587948|这段代码将最后一个选项卡的索引保存在localStorage中以更新新选项卡的当前值，并保存在sessionStorage中以修复页面的id！|1587949|我必须在应用程序的每个页面中调用defineTabId()函数。因为我使用JSF模板进行开发，所以这只在一个地方定义:-)|1587950|entityMap^0|8|N|0|0|I|C|1B|E|0|G|D|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

Since I don't have find no simple Javascript function as <code>windows.currentTabIndex</code>, I have written some lines of Javascript to fix an ID on each browser tabs when they are loaded.

<pre><code>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);
 }
 }
</code></pre>

This code save last tab's index in <code>localStorage</code> to update current value for new tabs and in <code>sessionStorage</code> to fix page's id !

I must call <code>defineTabId()</code> function in each pages of my application. Since I develop using a JSF templates, this is only defined in only one place :-)

blocks|key|1592104|text|对于在这里使用React的任何人，我做了一个偷偷的小钩子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1592105|import+{useEffect,+useMemo}+from+'react'
import+uniqid+from+'uniqid'

export+const+TAB_ID_KEY+=+'tabId'

export+default+()+=>+{
++const+id+=+useMemo(uniqid,+[])

++useEffect(()+=>+{
++++if+(typeof+Storage+!==+'undefined')+{
++++++sessionStorage.setItem(TAB_ID_KEY,+id)
++++}
++},+[id])

++return+id
}|code-block|syntax|javascript|1592106|把它放在你的基础App/Page组件上，或者放在你知道永远会被挂载的地方。|1592107|它将在挂载后运行效果，并在会话存储中为当前选项卡设置唯一的id，这是特定于选项卡的存储。|1592108|复制选项卡将为新选项卡获得新的id，因为组件将再次挂载，并且效果将运行，从而覆盖前一个选项卡的id|1592109|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

For anyone on here using React, I made a sneaky little hook:

<pre class="lang-js prettyprint-override"><code>import {useEffect, useMemo} from 'react'
import uniqid from 'uniqid'

export const TAB_ID_KEY = 'tabId'

export default () =&gt; {
 const id = useMemo(uniqid, [])

 useEffect(() =&gt; {
 if (typeof Storage !== 'undefined') {
 sessionStorage.setItem(TAB_ID_KEY, id)
 }
 }, [id])

 return id
}
</code></pre>

Put this on your base App/Page component, or somewhere that you know will always be mounted. 

It'll run the effect after mounting and set a unique id for the current tab in session storage, which is storage specific to the tab. 

Duplicating the tab will get you a new id for the new tab, since the component will mount again and the effect will run, overwriting the previous tab's id

blocks|key|1941739|text|下面是一种在页面加载后保持tabId可用的方法--即使在刷新之后也保持相同的tabId。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1941740|这还解决了重复选项卡的问题，因为从sessionStorage中清除了tabId。|1941741|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;
});|code-block|syntax|javascript|1941742|使用window.tabId访问tabId。|1941743|为了使tabId在刷新后具有相同的id，需要使用beforeunload事件。|1941744|load事件用于：|1941745|1941746|在刷新后以相同的tabId生成初始tabId-如果存在。|ordered-list-item|1941747|1941748|*我真的不知道为什么我应该做return+null或返回。只需了解不返回可能会导致函数无法工作:(|1941749|entityMap^0|D|5|12|5|0|H|E|Z|5|0|0|2|C|G|5|0|3|5|O|C|0|0|4|0|0|8|5|H|5|0|0|E|B|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]|$1|T|3|U|5|V|7|1Q|8|@$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1W|8|@$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]]|10|$]]

Here's a way to have the <code>tabId</code> available after the page was loaded - having the same <code>tabId</code> even after refresh.

This also solves the issue of duplicate tabs, as the <code>tabId</code> is cleared from the <code>sessionStorage</code>.

<pre><code>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;
});
</code></pre>

Access the <code>tabId</code> using <code>window.tabId</code>.

The <code>beforeunload</code> event is needed in order to persist the <code>tabId</code> to have the same id available after refresh.

The <code>load</code> event is needed to:

<ol>
<li>Generate the initial <code>tabId</code>.</li>
<li>Load the same <code>tabId</code> after refresh - if exists.</li>
</ol>

* I don't really know why I should do <code>return null</code> or return at all. Just read that not returning may cause the function to not work :(

blocks|key|1592131|text|您可以在服务工作者的"fetch“事件处理程序中获取选项卡ID+(或clientId)。如果需要将clientId发送到页面，只需使用client.postMessage()。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1592132|在您的服务工作者中：|1592133|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,
++});

+}());
});|code-block|syntax|javascript|1592134|在页面脚本中：|1592135|navigator.serviceWorker.addEventListener('message',+event+=>+{
+console.log(event.data.clientId);
});|1592136|资料来源：Client.postMessage()|offset|length|1592137|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage#examples:~:text=addEventListener('fetch',%2520event%2520=%253E%2520{,});^0|0|0|0|0|0|5|K|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

You can get the tab ID (or clientId) in &quot;fetch&quot; event handler of your service worker.
If you need to send that clientId to your page, just use client.postMessage().
In your service worker:
<pre><code>self.addEventListener(&quot;fetch&quot;, 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,
 });

 }());
});
</code></pre>
In your page script:
<pre><code>navigator.serviceWorker.addEventListener('message', event =&gt; {
 console.log(event.data.clientId);
});
</code></pre>
Sources:
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Client/postMessage#examples:%7E:text=addEventListener(%27fetch%27%2C%20event%20%3D%3E%20%7B,%7D)%3B" rel="nofollow noreferrer">Client.postMessage()</a>

I need to be able to identify what tab I am in within the browser. Isn't there some bit of information I can get from the browser to identify the tab? I don't need to know anything about any other tabs, I just need an id for the tab I am in. It could be a random or sequenced number, or a date-time stamp, as long as it remains the same for the life of the tab.

I have a client side app that makes a BOSH over HTTP connection to a remote server, and if I open it in multiple tabs, each instance needs its own unique id or the app fails, so I just need some unique number that is associated with the tab for as long as that tab exists (i.e. something that survives page refresh as I navigate the site that provides this app). Seems like a no-brainer that should just be available in the browser, like window.tabId - that's all I need. I've got a serious development block because I cannot get past this simple, simple, simple solution that doesn't seem to exist. There must be a way (a cross-browser solution at that).

Any ideas?

Any way to identify browser tab in JavaScript?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要能够识别出我在浏览器中的哪个选项卡。难道我不能从浏览器中获得一些信息来识别选项卡吗？我不需要知道任何关于其他标签的信息，我只需要我所在标签的id。它可以是一个随机的或连续的数字，也可以是一个日期-时间戳，只要它在选项卡的生命周期中保持不变。我有一个客户端应用程序，它通过HTTP建立到远程服务器的BOSH连接，如果...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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