Home > Firebug, JavaScript, Software > Inter / Cross Browser Window Communication Using JavaScript

Inter / Cross Browser Window Communication Using JavaScript

March 11th, 2008

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');

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

// Let us 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.

Author: Adam Kahtava Categories: Firebug, JavaScript, Software Tags:
  1. Deathspike
    November 27th, 2009 at 05:05 | #1

    This is only useful when the two are directly connected to each other. The purpose of cookies is an independent communications method which allows multiple tabs to communicate with each other without having to open each other. The user can open as many links as he wishes, this way.

  2. March 3rd, 2012 at 04:02 | #2

    Here’s a Remote Control example using SharedWorker and Notifications. Cool stuff.

    http://coolaj86.github.com/html5-shared-web-worker-examples

    https://github.com/coolaj86/html5-shared-web-worker-examples

  3. June 13th, 2014 at 15:02 | #3

    Here is library that allow to send messages to other open tabs with pages in same domain https://github.com/jcubic/sysend.js it use features of HTML5.

  4. Eugene
    April 21st, 2015 at 13:18 | #4

    Just one more implementation of inter-window communication – https://github.com/slimjack/IWC

  1. No trackbacks yet.