Ajax is great for sending data back and forth between a browser window and the server, but when it comes to communication between two browser windows, there are few libraries that can help you out there.

I’ve been working with jQuery for over a year now and have always wanted to give something back to the user community by releasing my own plugin. Unfortunately it seemed like every type of generic functionality I might ever need had already been developed by others. Until last night.

I was working on a webapp in which my main browser window had to open a popup window, and the user would then perform an action in this window. Upon completion of that action the main (parent) browser window needed to be notified.
Though parent and child window can easily access eachother’s DOM, a common way to get a value from one window to another is by setting a value on a hidden input field of a form in the other window. This requires you to add form markup to your page, which is clunky. A second issue is that if you have several types of events or data to send to the other window, you’ll need to add an input field for each type. And a third issue I ran into is that ‘change’ events do not seem to fire for an input field if that field was updated by another window. ‘change’ or custom events using jQuery didn’t work either this way. ‘click’ events on links or buttons do work, but they would need to be hidden, otherwise the user could click on them too. I got it all working but this all started to look like an ugly hack, cluttering my pages with messy javascript and markup code.

Long story short, this is where my new skills of creating jQuery plugins came to the rescue. This could all be put into a nice little plugin that would hide all the messy details of adding a form to your page and using hidden form elements to transfer data back and forth between windows. Even better, my new plugin makes it very easy to use multiple callback handlers, so you can define your own events that you can send from one browser window to the other. And events can be sent both ways in almost the same fashion. To my delight, it worked flawlessly in all browsers I’ve tried (FF, safari on Mac, and FF and IE7 on Windows).

Here’s how to use it:

In any page that needs to receive window events, make sure to call the initialization function upon page load:

$.initWindowMsg();

The parent window can open a child window the good old way:

childWin = window.open('child.html', 'mychildwindow');

and then send it an event with data:

$.triggerWindowEvent(childWin, "myevent", "some data");

The child window can register a callback handler for this event as follows:

$.windowMsg("myevent",  function(message) {
    // do  something  with message from parent
});

The child window can send a message back to the parent with:

$.triggerParentEvent("parentevent", "message to parent");

The parent can register a handler for this event in the same way:

$.windowMsg("parentevent",  function(message) {
    // do  something  with message from child
});

That’s all.

You can see a simple demo here. (make sure your popup blocker is turned off).

Download the plugin and demo files
One thing to keep in mind is that it is of course a requirement that one of the windows opened the other, and that neither window has navigated to any other pages. Once they’ve lost the reference to eachother, there’s no reconnecting. The triggerWindowEvent and triggerParentEvent functions return a boolean which indicates if the event could be sent or not. I could pretty easily add a function that could check if the parent or child window is still there actually… will add that in the first update of the plugin.