javascript - Upptäck närvaro av andra flikar/fönster på samma domän

Om jag har två (eller fler) flikar öppna på samma domän, finns det ett enkelt sätt att känna av närvaron av den andra, (för att kunna styra vilka beräkningar jag gör)? Jag förstår att det finns en window.open()-funktion, men jag öppnar inte ett fönster från ett annat. Föreställ dig istället att en användare går med två flikar till mydomain.com.

Jag har börjat skriva lite kod som använder HTML5 local storage, där jag periodvis lämnar meddelanden och kollar meddelanden, men det verkar lite invecklat.

Svar #1

Det är ett intressant problem.

Vi kan försöka kring de där API:erna: postMessage, sessionStorage, localStorage, webRtc.

BroadcastChannel passar mycket bra:

BroadcastChannel tillåter skript från samma ursprung men andra webbkällor (fönster, arbetare) att skicka meddelanden till varandra.

BroadcastChannel-gränssnittet representerar en namngiven kanal som vilken som helst webbkontekst av en given ursprung kan prenumerera på. Det möjliggör kommunikation mellan olika dokument (i olika fönster, flikar, ramar eller iframes) av samma ursprung. Meddelanden sänds ut via ett meddelandehändelse som utlöses på alla BroadcastChannel-objekt som lyssnar på kanalen.

Det skiljer sig från postMessage API:t genom det faktum att barnfönstren inte är avsedda att deklareras på föräldrasidan. På detta sätt finns det varken föräldrar eller barn längre.

Exempel på skickande:

new BroadcastChannel('myapp').postMessage('Hello?');

Exempel på mottagande:

new BroadcastChannel('myapp').addEventListener('message', function(e){
  console.log(e.data) 
})

På detta sätt kan vi räkna flikar, eller till och med informera de aktuella aktiva tillstånden till andra flikar, etc.

Användarfeedback sedan detta inlägg. BroadcastChannel API:et är ganska enkelt, men tillåter att omtänka arkitekturer.

Detta gör att importmoduler kan kommunicera med varandra, detta förenklar sammansättningen av skript.

Jag känner inte behovet av webpackade sammansatta skript för att bygga komplexa saker. Vi kan dela objekt - kodade i json - via kanalerna, kalla en «service» när det behövs, separera logik, mallar, fabriker, händelser, tjänster, mycket enklare.

Detta är exakt när det gäller minnesanvändning och prestanda. Vi kan skapa många kanaler som matar parallellt in en stor mängd data, detta har liten effekt på RAM/CPU och gränssnittets responsivitet.

Färre variabler, mindre logik, de data som skickas vidare är direkt bortkastade. Kodningsstilen är ganska lik websockets, händelsestyrd, detta är bara lokala socket(s).

Händelsestyrd arkitektur (EDA) är ett programvaruarkitekturparadigm som främjar produktion, detektion, konsumtion av och reaktion på händelser.

[MDN] Broadcast_Channel_API

https://caniuse.com/#feat=broadcastchannel

Svar #2

Att sätta en räknare i localStorage (öka räknaren när en ny flik öppnas) och förlita sig på onbeforeunload för att minska räknaren när en flik stängs är inte en pålitlig lösning eftersom om du tvingar att avsluta webbläsaren, kommer onbeforeunload-lyssnaren inte att köras och därför kommer räknaren inte att minskas.

Låt oss säga att om du har 1 flik öppen och din 'tabs_opened' localStorage-räknare är 1. Av någon anledning måste du tvinga stänga din webbläsare. När du öppnar webbläsaren igen och besöker samma webbplats, kommer 'tabs_opened'-räknaren nu att bli 2 eftersom 'tabs_opened'-räknaren inte minskades.

Jag är ledsen, det jag sa är inte riktigt ett svar (men jag kan inte lägga till en kommentar eftersom jag inte har tillräckligt med anseende för att lägga till en kommentar). Jag vill bara verkligen påpeka detta specialfall.