If I have two (or more) tabs open at the same domain, is there a simple way to sense the presence of the other one, (so as to control what putations I do)? I understand there is a window.open() function, but I am not opening one window from another. Instead imagine a user goes with two tabs to mydomain.

I have started writing some code doing using HTML5 local storage, where I periodically leave messages and check messages, but this seems a bit convoluted.

If I have two (or more) tabs open at the same domain, is there a simple way to sense the presence of the other one, (so as to control what putations I do)? I understand there is a window.open() function, but I am not opening one window from another. Instead imagine a user goes with two tabs to mydomain..

I have started writing some code doing using HTML5 local storage, where I periodically leave messages and check messages, but this seems a bit convoluted.

• javascript
• html
• cross-browser

• 1 were you able to find a solution for this? – Choxmi Commented Apr 4, 2019 at 8:05

3 Answers 3

That is an interesting problem.

We can try around those api: postMessage, sessionStorage, localStorage, webRtc.

The BroadcastChannel suits very well:

BroadcastChannel allows scripts from the same origin but other browsing contexts (windows, workers) to send each other messages.

The BroadcastChannel interface represents a named channel that any browsing context of a given origin can subscribe to. It allows munication between different documents (in different windows, tabs, frames or iframes) of the same origin. Messages are broadcasted via a message event fired at all BroadcastChannel objects listening to the channel.

It differ from the postMessage api by the fact that the child windows are not meant to be declared in the parent page. This way there is no more parents nor childrens.

Example sending:

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

Example receiving:

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

This way, we can count tabs, or even inform the current active states to other tabs, etc.

Usage feedback since this post. The BroadcastChannel api is quite simple, but permit to rethink architectures.

This allows import modules to talk to each others, this simplify the position of scripts.

I do not feel the need of webpacked posed scripts to build plex stuffs. We can share objects -encoded in json- via the channels, call a «service» when needed, separate logics, templates, factories, events, services, much more easily.

This is spot on for memory usage and performances. We can create many channels feeding in parallel some big flow of data, this has little effects on ram/cpu and interface responsiveness.

Less variables, less logic, the data broadcasted are directly garbaged. The coding style is pretty similar as websockets, event-driven, this is just local(s) socket(s).

Event-driven architecture (EDA) is a software architecture paradigm promoting the production, detection, consumption of, and reaction to events.

[MDN] Broadcast_Channel_API

https://caniuse./#feat=broadcastchannel

Setting a counter in localStorage (incrementing the counter when opening a new tab) and depending on onbeforeunload to decrement the counter when a tab is closed is not a reliable solution because if you force quit the browser, the onbeforeunload listener will not be executed and hence the counter will not be decremented.

Let's say if you have 1 tab opened and your "tabs_opened" localStorage counter is 1. For some reason you have to force quit your browser. When you re-open the browser and re-visit the same website, the "tabs_opened" counter will now bee 2 because the "tabs_opened" counter was not decremented.

I am sorry what I said is not exactly an answer (but I cannot add a ment because I don't have enough reputation to add a ment). I just really want to point out this edge case.

Use html5 session storage ,you can share datas between windows , so you can increment a session storage variable each time a window of a given domain is opened.