Who's Speaking To Who?

Like any family, parent and child windows have some members they talk to and some they don't. In JavaScript only parent and child windows can communicate between each other. By "communicate", I mean that JavaScript written on one can effect the other.

I can't emphasize enough how really simple and important this is to remember. Only parent and child windows can communicate between each other. If a parent window opens several child windows, the various child windows cannot communicate with each other, only with the common parent.

This can be awfully limiting, but there are often clever workarounds involving exactly which window opens another one. Just remember that parent and child windows talk, the children don't talk to each other.

I'd like to to also add that few sites actually use more than on or two child windows.

Parent To Child Communication

We've already seen some good examples of how a parent window communicates with a child window in the previous two lessons. You just use the child window's name in the object reference like we did with "window_name.close()" or "window_name.focus()".

Well now comes the fun part. We can manipulate the "document" object inside the child window. I know we haven't discussed the "document" object too much yet, but we know enough to change a page's background using the "document.bgColor" property.

Let's put together some of what we already know to make some code in a parent window that will change the background color of the document in the child window. For starters, the page in the child window is referenced by "child_window_name.document" and its background color would be "child_window_name.document.bgcolor".

Now make a quick parent page to open a window you've previously coded. I'll be using this window called "lovechild".

I want to make a link in this window that, when hovered over (onMouseOver), will change "lovechild's" background red. When I move off of the link (onMouseOut), I want the background to return to its original white.

<a href="#" onMouseOver=
"lovechild.document.bgColor='#ff0000'"
onMouseOut=
"lovechild.document.bgColor='#ffffff'">

Make sure you've got "lovechild" opened and focused (on top of this page). Next, don't click the link as this will cause "lovechild" to lose focus and you can see the effect. This is why I'm using onMouseOver and onMouseOut -- so "lovechild" won't lose focus. Okay, HOVER HERE!

Neat, huh? When you begin to discover all of the objects that can be manipulated in the "document" object, you'll have more fun with the window-to-window stuff.

A Big Problem

There is a problem that frequently crops up when coding between multiple windows. The viewer closes one of the windows. This means that a particular "window" object cannot be referenced with JavaScript. It no longer exists. Try hovering over the above link with the "lovechild" window closed. See?

We can get around this by coding a function that will insure that "lovechild" is open and focused:

function change(color){

lovechild = window.open("samp061.htm",
"babywindow",
"height=500,width=100,toolbar=0,
location=0,directories=0,status=0,
menubar=0,scrollbars=0,
resizeable=0");

lovechild.focus();

lovechild.document.bgColor= color;}

Now we just refer our onMouseOver and onMouseOut events in our "hover" tag to our new "change()" function and return the appropriate color:

<a href="#" onMouseOver="change('#ff0000')" onMouseOut="change('#ffffff')">

Lets test this new link and function:

HOVER HERE

The above code insures that the "lovechild" window is open and focused and prevents the previous error.

Child To Parent Communication

We all know that children talk back. This is no different with child windows. A child window can order things to happen in the parent window just like the parent can the child window.

A child window can refer to its parent window as "opener". The "parent"object refers to something else. The name "opener" is what a child window calls its parent -- "opener.document.bgColor="#ff0000".

Lets use this to change the background color of the parent widow's document from links in the child window.

First, just use any test page for the parent window and add the code that will open the child window. Notice that below I didn't put the child window code in a function. This means it will pop up and begin loading along with the parent window as soon as the JavaScript is read in the parent window's document's <head>

<script language="JavaScript">

evilChild = window.open("samp063.htm", "", "height=100, width=300,resize=0");

evilChild.moveTo(10,0) </script>

This will open a wide 300x100 window and puts it toward the top of the parent window. The HTML file "samp063.htm" will be loaded into this new window. It's this HTML file that will contain the links we'll use to change the parent window's background color. (Note: You can name this HTML file anything you want. Just remember to get the name right in the "window.open()" method.

Code links in the child window's page that lead to a function. I called mine "changeParent(color)". Use parameters to return a color value from the links:

<a href="javascript:changeParent('red')>

The above link would return the string "red" to the "changeParent(color)" function. Now lets code the "changeParent(color)" function in our child window's document's <head>

<script language="JavaScript">

function changeParent(color){

opener.document.bgColor = color;
window.focus();

</script>

Two things to notice here. First, see how I referred to the parent window as "opener". You can't name the parent window from the child window, so you have to use "opener" for the parent window's name. Since a child window can only have one parent window (at a time), this works out great.

Secondly, notice the second line in the function: "window.focus()". You already know that this just focuses the child window (the window the focus() is coded in). Why's that there? The child window is already on top.

Well, it's a workaround for an oddball problem involving active vs focused windows. I'm not going into it now, but try making this exercise without the "window.focus()" and watch what happens to the child window.

Click here to see a working sample of the above code. The link opens both a parent and child window. The parent window is the larger one. The child window has the links.

Summary

In closing, always remember that only parent/child windows can communicate with each other. Child windows cannot talk among themselves. They must be controlled from their respective parents.

A window can open as many child windows as it wants and all of them can communicate with the opening window and vice-versa.

A child window refers to it's parent window as "opener". It cannot rename the parent window.

In practice it's rare to see more than three windows being used at once. In the case of multiple windows, more is not merrier.

Exercise

Make a remote control for a main window by opening a little child window with links in it. Have these links load URLs in the parent ("opener") window.

To do this we need to learn a new "window" property -- "window.location". This works just like the "document.location" property we've already used.

opener.location="http://www.google.com/";

The above would cause Google's main page to load in the parent window. Remember that "window.location" is a property and uses an equals sign instead of parentheses like a method does.