In earlier lessons, you’ve learned:
- How to use dialog boxes and variables to store and utilize user input
- How to make your Web pages react to users’ actions using link events
- How to do a basic image swap
So far I’ve explained how to do many things, but I haven’t described why they work. In the last lesson, for instance, I showed you that
window.document.monkey_image.src = "happy_monkey.gif" will swap
happy_monkey.gif into an image named
monkey_image . But what is that
window.document stuff? And where does the
.src come from? Similarly, you’ve seen
document.writeln("monkey") . But why is it
document.writeln and not just
Introduction to Window Manipulation
href statement. Example:
The HTML used to do this is:
clicking <a href="yer_new_window.html" target="yer_new_window">here</a> will open another window.
The important thing to know about windows opened by targeted links is that the window above now has the name “yer_new_window” associated with it. If you have another
href that uses “yer_new_window” as the target, and you haven’t closed the window yet, whatever URL you put in that link will open in the original window.
For the purposes of this lesson, I’m going to call the target name, in this case
yer_new_window , the name of the window.
Now that we’ve had this brief refresher on
This statement opens a window with the URL that you list as the first parameter in the method call. Above it’s called ”
URL,” but in an actual call you’d write ”
http://www.mysite.com/webmonkey/” or something similar.
The second parameter of the method call is the window’s name. This is just like the name we saw in the last page. If you open a window and there’s already a window open with the same name, the URL in your
open statement will be sent to that open window.
The third parameter,
features, is a list of the different components a window can have. It’s an optional parameter, so let’s do some examples with the first two parameters before checking out
Try clicking on these three links and see what happens. Don’t close any of the windows until you’ve clicked on all three links.
Let’s take a look at how this is done. Here’s the first line:
When you click on this link, a new window called
features parameter is optional, you can just leave it out. This will give you the default window you would have gotten if you’d used a targeted
href , as in the previous page.
Notice that I put the call to open the window in an
onClick. You don’t have to put
window.open() calls inside an
onClick, it was just convenient to do so in this example. You’ll see examples of
<script> tags soon.
The second link is almost exactly like the first link. It just opens a window with a different name and loads in a different HTML page:
The third link sticks a new HTML page into the first window. This works because the third link opens a window with the same name as the first window:
Now the fun begins. We can play with the
features parameter to make our windows look very different.
OK already, let’s play with windows features!
The third parameter of the
window.open() method is a list of features that you’d like your window to have. As you’ve seen, if you don’t include this parameter at all, the window will contain all the features of a default browser window.
However, if you specify any features in the third parameter, just those features will appear. The way to specify that you’d like your window to have certain features is to list them as a comma-separated list.
For example, if you write …
… you’ll get a window with just the location box (the place in your browser where you type in a URL) and a menu bar (File, Edit, etc.). Note: that these code samples may wrap to fit here in your browser, but they should be all on one line, no spaces, when you actually use them.
Here’s another example:
This will open a window that is 100 pixels high and 100 pixels wide and has no features other than a location field. Notice again that there are no spaces in the string.
If you’d like to open a window that has almost all the features, you can specify which features you don’t want by setting those features equal to no. For example:
This will open a window that has all the features except the location field and the status bar. Here’s a list of the features that you can include in the feature string:
- This is the row of functions that appears on most software applications. Normally it includes
Edit, and a few other items.
- This allows scrollbars to appear when necessary.
resizableis listed, the window can be resized. Be careful of the spelling. I always get it wrong.
- The width of the window in pixels.
- The height of the window in pixels.
- The browser toolbar, which contains the
Stopbutton, and the
Homebutton, among others.
- The text area of a browser into which you can type URLs.
- The directories that Netscape browsers have called “What’s new,” “What’s cool,” and so on.
Here are some examples of different types of windows.
Once you’ve checked out the examples, and maybe tried bringing up some windows of your own, it’s time to learn how to mess with the contents of the windows.
A Brief Overview
Objects have properties that describe them. Some of the properties of a Window object are its name, the words in its status bar, the URL of the document inside the window, and the window’s document itself, which includes the words, images, and hyperlinks inside the window.
window. One of the properties of a window is the words in its status bar. Here’s how you can find out what’s in the status bar of the default Window:
var the_status = window.status;
This says:”Find the
status property of the Window object called
window , and load it into the variable
the_status .” In addition to reading what those words are, you can also change them. The way to set an object’s property is this:
window.status = "I'm monkeying around!";
Communicating between Windows
This example may be too wonky with today’s tabbed browsers
var new_window = window.open("hello.html","html_name","width=200,height=200");
This opens a little window and assigns the variable
<code>new_window</code> 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
<code>new_window</code> will behave just like the default Window object. You can call methods on
<code>new_window</code> just like you could on
The next line shows you an example of calling a method on
Not too tricky, it’s just like
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 (see above note) 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.
One neat thing about objects is that the properties of an object can be objects too. For example, windows have a property called
document that refers to the actual HTML document in the window. This
document property is itself an object that has properties and methods of its own. We saw an example of this when we talked about image swapping. Harkening back to the last lesson, we learned that you can do an image swap like this:
<a href="#" onMouseOver="window.document.the_image.src='button_d.gif';">change</a>
That long string,
window.document.the_image.src='button_d.gif', translates into:”Find the document property of the window, find
the_image property of the document, find the
src property of
the_image, and set it to
button_d.gif.” Quite a mouthful, eh? It all works because windows are objects, documents inside windows are objects, and images inside the documents are objects too.
We’re going to be visiting the various properties of the document object in lesson 5. However, before you can extract the full potential of that object, you should know how to mess with the DOM in other windows.
As we’ve seen, an image swap can be performed with a line like this:
document, and then find the thing called
Sometimes it’s useful to have a link in one window change an image in another window. Imagine a slide show in which one window displays the images and another little window contains thumbnails of each slide show image. Clicking on a thumbnail in the little window changes the image in the big window.
This example may be too wonky with today’s tabbed browsers
To give you an idea of what I’m talking about, here’s an example of a remote slide show control:
There are two windows in this example:the remote control window, and the slide show display window. Clicking on the link above opens the remote control. The remote control then automatically opens the display window by using this line between the <head> tags:
var display_window = <br>window.open("slide_show_main.html","display_window");
This opens a new window and assigns the variable
When the display window opens, there’s a chance it’ll open right on top of the remote. To ensure that the remote stays visible, we add this line, which executes after the display window opens:
Now that we’ve opened both the display window and the remote, we have to figure out how to make the links in the remote window change the image in the display window. If you view source on the display window, you’ll see that it’s very simple:It contains just one image, which I’ve named
<img src="sky.gif" name="main_image" height="400" width="400">
display_window variable we assigned earlier), find its document, and locate the image called
And here’s how you change the src of that image from the remote window:
display_window.document.main_image.src = 'sun.gif';
If you view source on the remote, you’ll see that I’ve stuck the above line into a link, like so:
<a href="#" onClick=<br> "display_window.document.main_image.src='sky.gif';return false;"><img src="sky.gif"></a>
Now that I’ve given you a taste of what you can do with the properties of the document object, let’s talk about a property of the window object:frames.
The first thing we need to look at is the frameset. Here it is:
<frameset rows="25%,*"> <frame src="frames_example_controls.html" name="control_frame"> <frame src="blank.html" name="target_frame"> </frameset>
The second thing to look at is the contents of the control_frame. To keep things simple, it only has one interesting line:
<a href="#" onClick="top.target_frame.document.writeln('Monkey do!<br>');">Monkey see</a>
This line tries to write the words “Monkey do!
Because frames are treated just like windows, we can do a similar thing:
Now, let’s learn more about windows and frames.
We’ve seen a couple of instances of built-in variables being used in the last few examples. One of the built-in variables is
writeln will happen in that frame. People sometimes
use the built-in variable called
self instead of
window. The two (
self) are interchangable.
In the last example, you were introduced to the built-in variable called
top. This will always refer to the top-most browser window. If you want to start at the top of the window hierarchy, use
Another built-in variable is
parent, which refers to the window containing the frame you’re currently in. If you have a frameset in a window, and one frame contains another frameset, the second frameset can refer to the enclosing frame using the
After you’re done with the assignment, be sure to review what we’ve covered this lesson.
We covered four main topics today:windows, frames, the Document Object Model, and Object-Oriented programming. By now you should know about
- Opening windows
- How to open windows and make them look the way you want
- Communication between windows
- Communication between frames
- Objects have properties and methods
- The Document Object Model
- A browser window is an object that comprises other objects. If you know the hierarchy of the objects in the DOM you know how to affect different aspects of your HTML page.
Although we didn’t go into all the details of all the objects in the DOM, we did get an idea of how it works. In the Lesson 4, we’ll cover a few aspects of computer programming that haven’t been touched on yet. And in Lesson 5, we’ll study the DOM further and go into how most of the objects in an HTML document can be accessed and changed.