Ik moet in staat zijn om te identificeren welk tab waarin ik in de browser zit. Is er geen wat informatie die ik kan krijgen van de browser om het tabblad te identificeren? Ik hoef niets te weten over andere tabbladen, ik heb gewoon een ID nodig voor het tabblad waarin ik zit. Het zou een willekeurig of gesequenceerd aantal kunnen zijn of een zegelstempel, zolang het hetzelfde blijft leven van het tabblad.
Ik heb een client-side-app die een BOSH via HTTP-verbinding met een externe server maakt, en als ik het in meerdere tabbladen open, heeft elke instantie zijn eigen unieke ID nodig of de app mislukt, dus ik heb gewoon een uniek nummer nodig is geassocieerd met het tabblad zolang dat tabblad bestaat (dwz iets dat de pagina overleeft als ik navigeer op de site die deze app biedt). Lijkt een no-brainer dat net in de browser beschikbaar zou moeten zijn, zoals venster.tabid – dat is alles wat ik nodig heb. Ik heb een serieus ontwikkelingsblok omdat ik niet voorbij deze eenvoudige, eenvoudige, eenvoudige oplossing kan komen die niet lijkt te bestaan. Er moet een manier zijn (een cross-browser-oplossing daarom).
Alle ideeën?
Antwoord 1, Autoriteit 100%
SessionStorage is per tab / venster, zodat u een willekeurig getal in sessionstorage kunt definiëren en in eerste instantie kunt krijgen als deze bestaat:
var tabID = sessionStorage.tabID ?
sessionStorage.tabID :
sessionStorage.tabID = Math.random();
update :
In sommige gevallen heeft u mogelijk dezelfde sessionstorage op meerdere tab (b.v. wanneer u het tabblad dupliceert). In dat geval kan de volgende code helpen:
var tabID = sessionStorage.tabID &&
sessionStorage.closedLastTab !== '2' ?
sessionStorage.tabID :
sessionStorage.tabID = Math.random();
sessionStorage.closedLastTab = '2';
$(window).on('unload beforeunload', function() {
sessionStorage.closedLastTab = '1';
});
Antwoord 2, Autoriteit 29%
U moet HTML5 gebruiken, maar sessionstorage gecombineerd met een willekeurige GUID lijkt te zijn wat u wilt.
Antwoord 3, Autoriteit 18%
Aangezien ik geen Simple JavaScript-functie heb gevonden als windows.currentTabIndex, heb ik enkele regels van JavaScript geschreven om een ID op elke browser-tabbladen te bevestigen wanneer ze worden geladen.
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);
}
}
Deze code Bewaar de index van het laatste tabblad in localStorageom de huidige waarde bij te werken voor nieuwe tabbladen en in sessionStorageom de ID van de pagina te repareren!
Ik moet defineTabId()-functie bellen in elke pagina’s van mijn toepassing. Omdat ik ontwikkel met het gebruik van een JSF-sjablonen, wordt dit alleen gedefinieerd in slechts één plaats: -)
Antwoord 4, Autoriteit 18%
Hier is een manier om de tabIdbeschikbaar te hebben nadat de pagina is geladen – met dezelfde tabIdzelfs na verversen.
Dit lost ook de kwestie van dubbele tabbladen op, zoals de tabIdis gewist van de 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;
});
Toegang tot tabIdmet window.tabId.
De gebeurtenis beforeunloadis nodig om de tabIdte behouden zodat dezelfde id beschikbaar blijft na het vernieuwen.
De gebeurtenis loadis nodig om:
- Genereer de initiële
tabId. - Laad dezelfde
tabIdna vernieuwen – indien aanwezig.
* Ik weet niet echt waarom ik return nullof helemaal niet zou moeten doen. Lees net dat niet terugkeren ertoe kan leiden dat de functie niet werkt 🙁
Antwoord 5, autoriteit 12%
U kunt geen tabblad-ID krijgen met javascript, maar er is een oplossing die u kan helpen bij het gebruik van verschillende sessies/cookies wanneer de gebruiker een nieuw tabblad opent.
Enige referentie:
Browsertabbladindex/-ID ophalen
URL’s van Firefox-tabbladen ophalen van de Firefox-extensie
Hoe kan ik sessies in browser-tabs verschillen?
Ontvang een unieke sessie in elk browsertabblad
asp.net – sessie – meerdere browsertabbladen – verschillende sessies?
Antwoord 6, autoriteit 6%
Voor iedereen hier die React gebruikt, heb ik een stiekem klein haakje gemaakt:
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
}
Plaats dit op je basis App/Page-component, of ergens waarvan je weet dat het altijd zal worden gemount.
Het voert het effect uit na het aankoppelen en stelt een unieke id in voor het huidige tabblad in de sessieopslag, die specifiek is voor het tabblad.
Door het tabblad te dupliceren krijgt u een nieuwe id voor het nieuwe tabblad, aangezien de component opnieuw wordt geactiveerd en het effect wordt uitgevoerd, waarbij de id van het vorige tabblad wordt overschreven
Antwoord 7, autoriteit 4%
Een van de mogelijke oplossingen is het gebruik van de eigenschap “window.name”, maar ik wil het niet gebruiken omdat iemand anders het kan gebruiken.
Ik heb nog een mogelijke oplossing gevonden: sessionStorage gebruiken. Het wordt ondersteund door FF3.5+, Chrome4+, Safari4+, Opera10.5+ en IE8+.
Antwoord 8, autoriteit 2%
Als er geen kans is dat een gebruiker binnen 2 milliseconden 3 tabbladen opent, kunt u een tijdstempel gebruiken en dat opslaan in window.name en dat gebruiken als de sleutel in uw zoekopdracht. De waarde window.name blijft bij het tabblad totdat het wordt gesloten.
Antwoord 9
U kunt de tab-ID (of clientId) ophalen in de gebeurtenishandler “fetch” van uw servicemedewerker.
Als je die clientId naar je pagina moet sturen, gebruik dan gewoon client.postMessage().
In uw servicemedewerker:
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,
});
}());
});
In uw paginascript:
navigator.serviceWorker.addEventListener('message', event => {
console.log(event.data.clientId);
});
Bronnen:
Client.postMessage()
Antwoord 10
In ieder geval voor Chrome is er sinds 2013 een officieel antwoord: chrome.tabs API.