Javascript Tutor - Lesson 16

Javascript and frames.

Javascript and frames together are a wonderful tool. They're a very powerful combination. Here are a few nifty examples of javascript and frames working together...

Handy Dandy Font Viewer

Dynamic page generation between frames. All controlled by javascript taking it's cue from user input.


Back when you were learning about frames, you learned to NAME frames and TARGET them. Well, javascript does exactly the same thing... only in javascript fashion.
Remember when we talked about an object hierarchy?

window.document.form.input.value

Windows and frames are similar. Consider this frameset...

<FRAMESET COLS="200,*">
<FRAME SRC="dir.html" NAME="leftframe">
<FRAME SRC="start.html" NAME="rightframe">
</FRAMESET>

The top level object is

window

Think of frames as a main window with child windows within it. window is the main window.

The left frame is a child of that window and we refer to it by name...

window.leftframe

Note that "leftframe" comes from the NAME of the frame. If you named your frame "hunnypot", you would reference it with window.hunnypot. The right frame is similar...

window.rightframe

Copy and save this as left.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

Click here

</BODY>
</HTML>

Copy and save this as right.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

And this as master.html...

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<FRAMESET COLS="200,*">
<FRAME SRC="left.html" NAME="leftframe">
<FRAME SRC="right.html" NAME="rightframe">
</FRAMESET>

</HTML>

Try it.

What we're going to do is make a link in the left frame write to the document in the right frame.

Oh, and while I'm thinking about it, you can only write to a document, you can't go back in an already rendered document and re-write write a portion. If you need to re-write a portion of the document, you must re-write the whole thing from the beginning. Now, that said, there are some newer DHTML techniques that allow manipulation of an already written document, but that is beyond the scope of a basic Javascript tutorial. You can investigate that on your own another day.


  Next>>  
 
Lesson Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25