You might be thinking, "No problem! Just open all your windows from one original window and then use the 'opener' property of each new window to refer back to the parent window. Right?" That will work, but only for Netscape clients. Unfortunately, most versions of Internet Explorer don't support the opener property at all. So, what we need is a browser-independent way of letting our windows talk to one another.
How does a parent window allow its children to access its contents? Listings 1 and 2 provide the answer.
The Timing Problem
So, how do we check if a file is loaded and parsed? Well, you might be tempted to use the "onLoad" event handler. Unfortunately, true to it's name, this only tells you when a file is loaded; actually getting the information in the file parsed into a DOM equivalent can take several seconds more. The most reliable way I've found to check if a file is loaded and parsed is to place a "dummy" form at the end of my documents and then examine the length of the document.forms array. For example, if the main form occurs early in your document and you place a dummy form at the end, when the length of document.forms becomes greater than 1 you know that not only has the dummy form been loaded and parsed, but that everything before it (including your main form) has been loaded and parsed as well!
The Generation Gap
We begin checking the state of our link by using the onLoad event handler. This handler is a function that simply compares myParent with self. If they are the same, we don't have a link and we use setTimeout() to try again two seconds later. If they are not the same, however, then we know that myParent now contains a reference to our parent window and we set the linked variable to true.
Testing the Link
To test the link, I've placed a simple form on the child page. If you type your first and last name into this form and then click the provided button, the passInfo() function will be called. This function first checks the linked variable to see if our link has been established. If not, it displays an alert that tells the user to try again in a few seconds. If the link has been established, it passes the entire form object to the showInfo() function in the parent window. This function simply extracts the information in the form object and displays it in an alert window.
In these two simple files, we've seen several interesting techniques. Arguably the most useful technique here is the ability to determine when an HTML file has finished loading. Over the years, I've found use after use for this little trick, and new uses seem to present themselves with each new project.
Almost as important is the ability to communicate in both directions between a parent window and its children. It's important to note that, after you establish this link you can use this window to window communication just as you would frame to frame communication. So, you can pass variables and objects, call functions, and make changes to a window's contents just as if you were working with a frames-based set of documents.
- Disbrow, Steven W., "The timing problem: a solution for complex Web sites," Java Report, Vol. 3, No. 2, Feb. 1998, pp. 6869.