React on webapplication changes in different tabs

Question

I have an webapplication which is running in two different browser windows/tabs at the same time (lets call them a and b). The problem is that I need to react on clicks in tab a with content updates in window b, the changes need to be immediatly.

Any suggestions are welcome. Thanks.

Answer 1

A direct communication between browser tabs/windows only works, if one of the windows has been opened by the other one using window.open. If this is the case in your application, you can do something like the following (instant bidirectional communication). This is only a very basic example, but I'm sure you can expand it to fit your needs.

window A:

var windowB = window.open("windowB.html");   //reference to window B
windowB.onload = function(){
    windowB.triggerChange();
};

function changeOK(str) {
    console.log("windowA: "+str);
}

window B:

var windowA = window.opener;   //reference to window A

function triggerChange() {
    console.log("windowB: triggerChange");
    windowA.changeOK("change done");
}

Don't forget to disable your pop-up blocker before trying this out. ;)

If window A and window B are opened independently though, you can't use direct communication like this. You then have basically two options to accomplish what you want (described here on SO):

1. Use cookies: Set a cookie in window A to pass data and read the cookie regularly using setTimeout in window B to react on changes. See this example.

2. Communicate with a server using AJAX with long polling (Comet technique).

As both solutions use indirect communication, they obviously can't trigger instant changes in window B. So you will have to wait at least several milliseconds until B's content can be updated.