JavaScript callbacks between windows

I sometimes get tasks that seem tricky at first and turn out to be simple. That happened when I needed a child window to call back into its parent. The parent window held a form. A child window opened a lookup list for certain form fields, and selecting a value passed it back to the parent.

To make the form easier to use, we needed to set other form options or take some other action when a value
came back from the list. The solution had to be general enough to leave scripts that use lookup lists without needing this feature alone.

How to do it

To make a child window communicate with its parent, the place
to start is opener. Every window opened with window.open() has a reference to its parent there.

We’ll use a function as the interface between the two windows. Call it onenumsubmit, for example. It runs on the parent window when
the user finishes with the child window.

We’ll call onenumsubmit every time the child window is used, but have to handle the case where the function doesn’t exist. We can
use exceptions and a protected block with try, catch, or check
whether it exists by using JavaScript’s automatic type conversion.

For the example, we’ll attach to onenumsubmit a function that developers can implement in the client. For variety, we’ll also show a general way to pass
additional arguments to that function and retrieve them from arguments.

A solution with commentary

Start by preparing the client function, where you can implement whatever logic you need.

function myListener(){
	  //logika pracující s rodičovským oknem
	}

We attach myListener to onenumsubmit. The
onenumsubmit function also needs to be a property of window. Then in the child window, opener points to the parent’s window with its onenumsubmit function.

window.onenumsubmit = myListener;

Or alternatively

To make life as easy as possible for developers, I’ve prepared a simple template they can call, since we use XSL in our solutions.

window.onenumsubmit = myListener;
   	 
  
  .
  .
  .volání
  .
  
    myListener

The client code for the parent window is ready. Now let’s call
onenumsubmit from the child window. Calling onenumsubmit also calls our myListener function. We can tie the call to closing the child window (window.close()) or to the onunload event.

opener.onenumsubmit()

This won’t handle the case where onenumsubmit doesn’t
exist. We can use the try, catch mentioned above or check for the function.

try{
	  opener.onenumsubmit()
	}catch(e){
	  //ignoruj výjimku
	}

if(opener.onenumsubmit){
          //funkce existuje
	  opener.onenumsubmit();
	}

Ignoring exceptions with an empty catch block isn’t good practice. The exception we decide to swallow
 might come from a missing onenumsubmit function, but it could also come
 from an error in the client function attached to onenumsubmit, which in our example is myListener.

If that happened, we’d have a tough time tracking the error down, because it would always be swallowed without any error message.

I’ve saved a small twist on passing arguments to the client function for last. JavaScript doesn’t support overloading functions by the number or type of arguments. It does make all the arguments available inside the called function through arguments.

Say we want to pass two values from the child window to the client function.

if(opener.onenumsubmit){
	  opener.onenumsubmit("fooValue","hooValue");
	}

function myListener(){
	  fooValue = arguments[0];
          hooValue = arguments[1];
	}

Of course, you could define myListener with the arguments
 right in the declaration (myListener(fooValue, hooValue)). But arguments
 comes in handy if you don’t know how many arguments there are. To try it out, here’s a complete
 example.

Related articles

• (Dagblog, June 4, 2003) JavaScript and Sharing Variables Between Windows