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>> | ||||||||||||||||||||||||||||||||
|