问题
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 computations 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.com.
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.
回答1:
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 become 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 comment because I don't have enough reputation to add a comment). I just really want to point out this edge case.
回答2:
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 communication 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 composition of scripts.
I do not feel the need of webpacked composed scripts to build complex 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 datas, this has no effects on ram/cpu and interface responsiveness.
Less variables, less logic, datas broadcasted are directly garbaged. The coding style is pretty similar as websockets, this is just a local socket.
--
Broadcast_Channel_API
https://caniuse.com/#feat=broadcastchannel
回答3:
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.
来源：https://stackoverflow.com/questions/9576851/detect-presence-of-other-tabs-windows-of-same-domain