background
|
|
Computer

Hosting
My-Hosts.com
Cheap Hosting, domain registration and design. Check this out for more details.
More icon
|
|
Up Image
Navigation
Search this Site
Enter your search terms

Site Breadcrumb - You are here
|
Thau's JavaScript Tutorial
Lesson 3

by Thau!

Page 8 — Communicating between Windows

Although it doesn't make sense to blur or focus the window you're on, you might well want to move another window to the fore. In order to communicate with a window using JavaScript, you need a reference to that window. Look at this example and then come back here for an explanation.

Getting and using a window reference.

There are a few key lines in this JavaScript. First, we open a new window and get a reference to it:

var new_window = window.open("hello.html","html_name","width=200,height=200");

This opens a little window and assigns the variable new_window to refer to it. Just as variables can contain numbers and strings, variables can also contain references to objects — in this example, a Window object. Now the variable new_window will behave just like the default Window object. You can call methods on new_window just like you could on window.

The next line shows you an example of calling a method on new_window:

new_window.blur();
Not too tricky, it's just like window.blur() from the last page. These two lines appear in the head of the HTML page. View Source on the page if you want to see the whole thing. As I've mentioned, I tend to put my JavaScript code in the head of HTML pages. That way I can find it when I'm looking for it. These lines of JavaScript could just as easily have gone in the body.

Now, moving to the body we see two links that will move the new window forward or backward:

<a href="#" onMouseOver="new_window.focus();">Bring it forward</a>
<a href="#" onMouseOver="new_window.blur();">Put it backward</a>

Get it? Let's see ... it's time for an exercise. Try writing this extension to the previous window-reference example. This exercise is pretty tricky; to get it working, you'll have to figure some things out. But give it a try before you View Source to check the answer.

After you're done, come back here and we'll go on to discuss more about the JavaScript Object Model.

next page»