JavaScript; communication between tabs/windows with same origin

Viewed 81956

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.
  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 specifications)

Two ways I am aware of doing this:

  • messaging by server: where window B regularly 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 regularly 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)

The ultimate goal is to make something like Facebook where if you open four Facebook tabs and chat in one tab, the chat is up to date in every Facebook tab, which is neat!

7 Answers

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 MDN and a comment on the MSDN docs suggests it works in IE as well; that said, in 2017 someone added a somewhat ranty note to the MDN article listing some limitations — I haven't independently verified them). 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.)

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
Related