Writing.Parent/Child Windows and JavaScript
Last updated on Sun May 11, 2008 |

There was a time not too long ago when pop-up windows ruled the web — well, infested may really be the better word. With the advent of built-in pop-up blockers in most web browsers, though, the use and abuse of pop-up windows as a standard web design practice has fallen far out of fashion. That said, there are definitely still perfectly legitimate reasons to include a pop-up window in your website, so even modern web developers should have a solid grasp on how to make use of this technology when the need arises.

In this article, we'll focus on one specific use for pop-up windows that often seems misunderstood or confusing for a lot of people when they first encounter it — modifying a parent window from the child window. I'll assume you already know the basics of the window object's open method in JavaScript. If not, you may want to familiarize yourself with it here first. Likewise, I'll also assume that you already know how to create whatever content you want to fill your pop-up window with.

On a side note, it's important to point out that even though I'm referring to these windows as parent and child, they don't actually share a parent/child relationship in the same way that, say, HTML frames do. The terminology is just a way to help ground an otherwise abstract concept.

So, before getting into the technical underpinnings, let's first look at a specific example. Below is a readonly text input box created with the following HTML:

<form id="form_ex1" name="form_ex1">
<input type="text" id="ex1" name="ex1" width="20" readonly="readonly" />
</form>

Our goal is to open a pop-up window, select an option from a select box in the pop-up window and have the selected option's value show up in the input box on this page. (I'll leave it up to you to imagine why we might have this as a goal.)

The key to making it all work is knowing how to reference this document, the parent, from the pop-up child window. Simply put, the pop-up window references the window that created it by using the HTML DOM window.opener property. That's really all there is to it. You can reference and manipulate the window.opener property in the same ways as any other part of the HTML DOM. Let's try it out now, by opening the pop-up window.

In the pop-up window, you see a simple select box. The onChange event for this select box triggers a JavaScript function called displayOption(). Let's look at that code now:

In line 1, we simply define the displayOption() function and set displayValue to the value passed when the function's called as a result of the onChange event. In line 2, a variable called parentObjectInput is declared to reference the element in the parent window with the id "ex1" — the input field on this page as shown in the HTML code above. This line is really the key to the whole process. By beginning the reference with window.opener we only need to follow up with a valid object or property in the parent window; in this case, that's document.getElementById('ex1'). Lastly, in line 3, we set the value of the input field to displayValue, the value of the selected option in the select box.

And, that's all there is to it! You may notice that I've given my form and input elements both name and id attributes. That's to show you that either way works. In the displayOption() function I chose to work with the id attributes, but I could have just as easily worked with the name attributes by modifying the function like this:

var parentObject = window.opener.document.forms['form_ex1'].elements['ex1'];

If you find yourself thinking, "Well, that's all great, but why would I ever want to do this? Changing an image or the contents of a paragraph in the parent window, now that would be useful!" Then I'm happy to tell you, that's just as easy. Simply by referencing the window.opener property in the child window, you can modify anything in the parent window through standard DHTML practices (that includes both innerHTML and DOM manipulation techniques).

On a final note, you should be aware that the relationships referenced by the window.opener property do not stop at one child and one parent. In fact, there's no limit. If your child window opened a child window of its own, then that second child window could refer to the first child window as window.opener and so on. Although in all honesty, opening a child window from a child window is really one of the major practices that gave pop-up windows such a bad name in the first place, so I'd very strongly recommend against doing that. Chances are, if you find yourself wanting to open several generations of pop-up windows (children, grandchildren, great-grandchildren), you really need to re-think your whole user interface. When it comes to spawning multiple pop-up windows, abstinence really is the best practice.