pagetutor.com - HTML tutorials for the rest of us

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

ColorPicker
The script is in the left frame. When a change is detected (or a color is chosen) it completely re-writes the right frame with javascript. Even when the thing first loads, the right frame is written using javascript.
Print version order page
What you may not notice right away is that this order page is actually a framed page. There is a top frame and bottom frame with a height of 0. The scripting is in the master page and directs the two frames below it. This order page uses a form to gather mailing information, then uses javascript to check that the certain fields were entered, the email address is valid, etc. It then uses javascript to write a custom order page based on the user's input. You are welcome to try it out. (Generating a printable order won't result in a sale unless you print it out and send me a check, so play with it as you wish.)
GateKeeper
When you try the GateKeeper example, you might notice that it's acually made up of multiple frames with javascript choreographing events between them and. Javascript even does all the writing.
Handy Dandy Font Viewer
Again, 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.

<< BACK         NEXT >>
pagetutor.com



Invest in the future - Hug your kid today.