Javascript communication between browser tabs windows

Question

What s the most reliable way to have Javascript communicate between tabs windows of the same browser  For example  when Tab 2 starts audio playback  Tab 1 somehow knows about this and can pause it s player   I m building a site with a music player    so at the moment if you open two tabs to the site  you could start music on both  This is obviously bad  so I m trying to find a solution    Any ideas  Thanks

User · Answer

Found different way using HTML5 localstorage, I've create a library with events like API:

sysend.on('foo', function(message) {
    console.log(message);
});
var input = document.getElementsByTagName('input')[0];
document.getElementsByTagName('button')[0].onclick = function() {
    sysend.broadcast('foo', {message: input.value});
};

it will send messages to all other pages but not for current one.

User · Answer

Communicating between different JavaScript execution context was supported even before HTML5 if the documents was of the same origin  If not or you have no reference to the other Window object  then you could use the new postMessage API introduced with HTML5  I elaborated a bit on both approaches in this stackoverflow answer

User · Answer

This is an old answer  I suggest to use modern version described here    Javascript  communication between tabs windows with same origin    You can communicate between browser windows  and tabs too  using cookies    Here is an example of sender and receiver    sender html   lt h1 gt Sender lt  h1 gt    lt p gt Type into the text box below and watch the text     appear automatically in the receiver  lt  p gt    lt form name  sender  gt   lt input type  text  name  message  size  30  value    gt   lt input type  reset  value  Clean  gt   lt  form gt    lt script type  text javascript  gt  lt  -- function setCookie value        document cookie    cookie-msg-test     value      path         return true    function updateMessage         var t   document forms  sender   elements  message        setCookie t value       setTimeout updateMessage  100     updateMessage      -- gt  lt  script gt    receiver html     lt h1 gt Receiver lt  h1 gt    lt p gt Watch the text appear in the text box below as you type it in the sender  lt  p gt    lt form name  receiver  gt   lt input type  text  name  message  size  30  value    readonly disabled gt   lt  form gt    lt script type  text javascript  gt  lt  -- function getCookie         var cname    cookie-msg-test        var ca   document cookie split           for  var i 0  i  lt  ca length  i              var c   ca i           while  c charAt 0        c   c substring 1 c length           if  c indexOf cname     0                return c substring cname length  c length                       return null    function updateMessage         var text   getCookie        document forms  receiver   elements  message   value   text      setTimeout updateMessage  100     updateMessage      -- gt  lt  script gt

User · Answer

There is also an experimental technology called Broadcast Channel API that is designed specifically for communication between different browser contexts with same origin  You can post messages to and recieve messages from another browser context without having a reference to it   var channel   new BroadcastChannel  foo    channel onmessage   function  e          Process messages from other contexts        Send message to other listening contexts  channel postMessage   value  42  type   bar       Obviously this is experiental technology and is not supported accross all browsers yet

User · Answer

edit  With Flash you can communicate between any window  ANY browser  yes  from FF to IE at runtime     ANY form of instance of flash  ShockWave activeX

User · Answer

I don t think you need cookies  Each document s js code can access the other document elements  So you can use them directly to share data  Your first window w1 opens w2 and save the reference  var w2   window open         In w2 you can access w1 using the opener property of window

User · Answer

You can do this via local storage API  Note that this works only between 2 tabs  you can t put both sender and receiver on the same page   On sender page   localStorage setItem  someKey    someValue      On the receiver page        document  ready function               window addEventListener  storage   storageEventHandler  false            function storageEventHandler evt                alert  storage event called key      evt key

User · Answer

You can communicate between windows  tabbed or not  if they have a child-parent relationship    Create and update a child window    lt html gt   lt head gt   lt title gt Cross window test script lt  title gt   lt script gt  var i   0  function open and run         var w2   window open      winCounter         var myVar setInterval function   myTimer w2   1000      function myTimer w2        i        w2 document body innerHTML   lt center gt  lt h1 gt     i     lt  h1 gt  lt p gt  lt  center gt       lt  script gt   lt  head gt   lt body gt  Click to open a new window   lt button onclick  open and run     gt Test This  lt  button gt       lt  body gt   lt  html gt    Child windows can use the parent object to communicate with the parent that spawned it  so you could control the music player from either window   See it in action here  https   jsbin com cokipotajo edit html js output

User · Answer

Below window w1  opens another window w2   Any window can send receive message to from another window  So we should ideally verify that the message originated from the window w2  we opened   In w1  var w2   window open  abc do    window addEventListener  message   function event       console log event data         In w2 abc do   window opener postMessage  Hi  I m w2

User · Answer

For a more modern solution check out https   stackoverflow com a 12514384 270274 Quote   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  Reference  http   dev w3 org html5 webstorage  http   dev w3 org html5 webstorage  the-storage-event

[javascript] Javascript communication between browser tabs/windows

Examples related to javascript

Examples related to browser