javascript - Oppdag tilstedeværelse av andre faner/vinduer med samme domene

Hvis jeg har to (eller flere) faner åpne på samme domene, finnes det en enkel måte å merke tilstedeværelsen av den andre på (slik at jeg kan kontrollere hvilke beregninger jeg gjør)? Jeg forstår at det finnes en window.open()-funksjon, men jeg åpner ikke ett vindu fra et annet. I stedet, forestill deg at en bruker går med to faner til mydomain.com.

Jeg har begynt å skrive litt kode som bruker HTML5 local storage, der jeg periodisk legger igjen meldinger og sjekker meldinger, men dette virker litt innviklet.

Svar #1

Det er et interessant problem.

Vi kan prøve rundt de API-ene: postMessage, sessionStorage, localStorage, webRtc.

BroadcastChannel passer veldig godt:

BroadcastChannel lar skript fra samme opprinnelse, men andre nettleserkontekster (vinduer, arbeidere) sende meldinger til hverandre.

BroadcastChannel-grensesnittet representerer en navngitt kanal som enhver nettlesingskontekst av en bestemt opprinnelse kan abonnere på. Det tillater kommunikasjon mellom forskjellige dokumenter (i forskjellige vinduer, faner, rammer eller iframes) av samme opprinnelse. Meldinger kringkastes via en meldinghendelse utløst på alle BroadcastChannel-objekter som lytter til kanalen.

Det skiller seg fra postMessage API-et ved at barnevinduene ikke er ment å bli deklarert på foreldresiden. På denne måten er det ikke lenger noen foreldre eller barn.

Eksempel på sending:

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

Eksempel på mottak:

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

På denne måten kan vi telle faner, eller til og med informere de nåværende aktive tilstandene til andre faner, osv.

Tilbakemelding på bruk siden dette innlegget. BroadcastChannel API-et er ganske enkelt, men tillater å tenke nytt om arkitekturer.

Dette gjør at importerte moduler kan kommunisere med hverandre, dette forenkler sammensetningen av skript.

Jeg føler ikke behov for webpackede sammensatte skript for å bygge komplekse ting. Vi kan dele objekter - kodet i json - via kanalene, kalle en «tjeneste» når det trengs, skille logikk, maler, fabrikker, hendelser, tjenester, mye enklere.

Dette er helt riktig når det gjelder minnebruk og ytelse. Vi kan lage mange kanaler som parallelt mater inn en stor datamengde, dette har liten effekt på RAM/CPU og grensesnittrespons.

Færre variabler, mindre logikk, dataene som sendes ut blir direkte kastet. Kodingstilen er ganske lik websockets, hendelsesdrevet, dette er bare lokale socket(er).

Hendelsesdrevet arkitektur (EDA) er et programvarearkitekturparadigme som fremmer produksjon, påvisning, forbruk av og reaksjon på hendelser.

[MDN] Broadcast_Channel_API

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

Svar #2

Å sette en teller i localStorage (øke telleren når en ny fane åpnes) og stole på onbeforeunload for å redusere telleren når en fane lukkes, er ikke en pålitelig løsning fordi hvis du tvinger avslutting av nettleseren, vil ikke onbeforeunload-lytteren bli utført, og derfor vil ikke telleren bli redusert.

La oss si at du har 1 fane åpen og at din «tabs_opened»-teller i localStorage er 1. Av en eller annen grunn må du tvinge avslutte nettleseren din. Når du åpner nettleseren igjen og besøker samme nettsted, vil «tabs_opened»-teller nå bli 2 fordi «tabs_opened»-teller ikke ble redusert.

Jeg beklager, det jeg sa er ikke egentlig et svar (men jeg kan ikke legge til en kommentar fordi jeg ikke har nok omdømme til å legge til en kommentar). Jeg ønsker bare virkelig å påpeke dette spesialtilfellet.