Javascript; communication between tabs/windows wit

Question

This question already has an answer here:

• Communication between tabs or windows 8 answers

I have two windows: window A and window B.

• window A and window B have same domain
• window A and window B doesn't have any parent window.

Questions:

1. Is it possible for window A to get a reference of window B?
2. what is the most elegant way to make window A notify something to window B?
   (including new HTML5 specs)

Two ways i am aware of doing this:

• messaging by server: where window B regulary asks the server if window A has notified something
• messaging by local data (HTML5): when window A wants to notify something it changes the local data, window B regulary checks the local data for any changes.

But the two ways are not so elegant.
For example it would be nice to get a reference of window B and use window.postMessage() (HTML5)

Ultimate goal is to make something like facebook where if you open 4 facebook tabs and chat in one tab, the chat is up to date in every facebook tab, which is neat!

Answer 1

You said your:

utlimate goal is to make something like facebook where if you open 4 facebook tabs, and chat in one tab, the chat is actualize on every facebook tab, wich is neat!

That should happen as a by-product of your design, the views querying the model (probably the server) for updates to the chat, rather than your having to design in cross-view communication. Unless you're dealing with transferring huge amounts of data, why worry about it? It seems like it'll complicate things without a huge gain.

Years ago I found that if I did window.open using the name of an existing window and a blank URL, I got a reference to the existing window (this behavior is even documented on MDC and a comment on the MSDN docs suggests it works in IE as well). But that was years ago, I don't know how universal the support for it is in today's world, and of course you won't have a window name to look for unless all of your windows include a named iframe for communication, named uniquely via server-side code, and then communicated to the other windows by means of server-side code... (Scary thought: That might actually be feasible. Store the "current" window names related to a logged-in account in a table, give the list to any new window created that logs into that account, cull old inactive entries. But if the list is slightly out of date, you'll open new windows when searching for others... And I bet support is iffy from browser to browser.)

Answer 2

I'm sticking to the shared local data solution mentioned in the question using localStorage. It seems to be the best solution in terms of reliability, performance, and browser compatibility.

localStorage is implemented in all modern browsers.

The storage event fires when other tabs makes changes to localStorage. This is quite handy for communication purposes.

References can be found here:
Webstorage
Webstorage - storage event

Answer 3

AFAIK, it is impossible to communicate across windows if they do not have the same parent.

If they have both been opened from a parent window, you should be able to get hold of the parent's variable references.

In the parent, open the windows like this:

childA = window.open(...);
childB = window.open(...)

in ChildA, access childB like this:

childB = window.opener.childA

Answer 4

SharedWorker is the WHATWG/ HTML5 spec for a common process that can communicate amongst tabs.

Answer 5

I have a neat way to do such trick, but with restrictions: you should allow popups for your domain and you will get one page always opened (as tab or as popup) which will implement communications between windows.

Here's an example: http://test.gwpanel.org/test/page_one.html (refresh page after enabling popups for domain)

The main feature of this trick - popup is being opened with url fragment '#' in the end, this force browser to don't change window location and store all the data. And window.postMessage do the rest.

Answer 6

The BroadcastChannel standard allows to do this. Right now it is implemented in Firefox and Chrome (caniuse, mdn):

// tab 1
var ch = new BroadcastChannel('test');
ch.postMessage('some data');

// tab 2
var ch = new BroadcastChannel('test');
ch.addEventListener('message', function (e) {
    console.log('Message:', e.data);
});