A quick search on the internet for "Inter Browser Window Communication Using JavaScript" reveals many outdated search results recommending questionable techniques. In the past I've fallen prey to many of these ill-advised suggestions. So... I thought, I'd start a small series on JavaScript techniques that I've found useful.

This post covers Inter / Cross Browser Window Communications using JavaScript.

A common scenario in web applications is: to have Page A open Page B , then have Page A communicate with Page B or vise versa.

One of the techniques floating around the internet suggests that you use Cookies and a JavaScript setTimeout function that listens for the presence of a cookie. So essentially Page A sets a cookie and Page B listens for this cookie and acts on it.

A alternate solution might be to use the JavaScript Browser window.open and window.opener methods. Using these two methods we can achieve inter / cross browser window communication as long as the Same Origin Policy is withheld - a similar approach can be taken for frame and iframe communication.

An example:

// myNewWindow stores the reference to the newly
//   created window, this provides a handle for defining
//     and calling methods in the New Window
var myNewWindow = window.open('about:blank');

// Lets call the alert method in our New Window
//    from this window (the Original Window)
myNewWindow.alert('Hello From Original Window');

// Lets call an alert method in our Original Window
//    from our New Window. So.. Lets use a timer
myNewWindow.setTimeout(
  'window.opener.alert(\'Hello From The New Window\')', 100);

Click here to run this code live in your browser window using a Bookmarklet, or copy the above code into your Firebug Command Line Console.