web-dev-qa-db-fra.com

Est-il possible d'identifier l'onglet du navigateur en JavaScript?

Je dois être en mesure d'identifier l'onglet dans lequel je me trouve dans le navigateur. N'y a-t-il pas un peu d'informations que je peux obtenir du navigateur pour identifier l'onglet? Je n'ai besoin de rien savoir sur les autres onglets, j'ai juste besoin d'un identifiant pour l'onglet dans lequel je me trouve. Il peut s'agir d'un nombre aléatoire ou séquencé, ou d'un horodatage, tant qu'il reste le même pour le la vie de l'onglet.

J'ai une application côté client qui établit une connexion BOSH sur HTTP à un serveur distant, et si je l'ouvre dans plusieurs onglets, chaque instance a besoin de son propre identifiant unique ou l'application échoue, j'ai donc juste besoin d'un numéro unique associé à l'onglet aussi longtemps que cet onglet existe (c'est-à-dire quelque chose qui survit à l'actualisation de la page lorsque je navigue sur le site qui fournit cette application). On dirait une évidence qui devrait simplement être disponible dans le navigateur, comme window.tabId - c'est tout ce dont j'ai besoin. J'ai un sérieux blocage de développement parce que je ne peux pas dépasser cette solution simple, simple, simple qui ne semble pas exister. Il doit y avoir un moyen (une solution multi-navigateur à cela).

Des idées?

javascriptbrowsertabsuniqueidentifier
34
user1588877

SessionStorage est par onglet/fenêtre, vous pouvez donc définir un nombre aléatoire dans sessionStorage et l'obtenir d'abord s'il existe:

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

MISE À JOUR :
Dans certains cas, vous pouvez avoir le même sessionStorage dans plusieurs onglets (par exemple lorsque vous dupliquez l'onglet). Dans ce cas, le code suivant peut être utile:

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

Vous devez utiliser html5, mais sessionStorage combiné avec un guid aléatoire semble être ce que vous voulez.

11
jmoreno

Comme je n'ai pas trouvé de fonction Javascript simple comme windows.currentTabIndex, J'ai écrit quelques lignes de Javascript pour fixer un ID sur chaque onglet du navigateur lors de leur chargement.

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

Ce code enregistre l'index du dernier onglet dans localStorage pour mettre à jour la valeur actuelle des nouveaux onglets et dans sessionStorage pour corriger l'identifiant de la page!

Je dois appeler la fonction defineTabId() dans chaque page de mon application. Étant donné que je développe en utilisant des modèles JSF, cela n'est défini qu'en un seul endroit :-)

5
schlebe

Vous ne pouvez pas obtenir l'identifiant de l'onglet avec javascript, cependant il existe une solution qui peut vous aider à utiliser différentes sessions/cookies lorsque l'utilisateur ouvre un nouvel onglet.

Quelques références:

Obtenir l'index/l'identifiant de l'onglet du navigateur

obtenir les URL des onglets firefox à partir de l'extension firefox

Comment différencier les sessions dans les onglets du navigateur?

Obtenez une session unique dans chaque onglet du navigateur

asp.net - session - plusieurs onglets de navigateur - différentes sessions?

5
Trinh Hoang Nhu

Une des solutions possibles est d'utiliser la propriété "window.name", mais je ne veux pas l'utiliser car quelqu'un d'autre peut l'utiliser.

J'ai trouvé une autre solution possible: en utilisant sessionStorage. Il est pris en charge par FF3.5 +, Chrome4 +, Safari4 +, Opera10.5 + et IE8 +.

2
DioNNiS

S'il n'y a aucune chance qu'un utilisateur ouvre 3 onglets dans les 2 millisecondes, pourrait utiliser un horodatage et le stocker dans window.name et l'utiliser comme clé dans votre recherche. La valeur window.name restera dans l'onglet jusqu'à sa fermeture.

Horodatage

1
eaglei22

Pour tous ceux qui utilisent React ici, j'ai fait un petit crochet sournois:

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
}

Mettez cela sur votre composant App/Page de base, ou quelque part que vous savez sera toujours monté.

Il exécutera l'effet après le montage et définira un identifiant unique pour l'onglet actuel dans le stockage de session, qui est un stockage spécifique à l'onglet.

La duplication de l'onglet vous donnera un nouvel identifiant pour le nouvel onglet, car le composant se montera à nouveau et l'effet s'exécutera, écrasant l'identifiant de l'onglet précédent

0
Matt Wills