HTMLisEasy.com
HTML tutorials for the rest of us...
Javascript Tutor - Lesson 16

Javascript and frames.

Javascript and frames together are a wonderful tool. They can be a very powerful combination.

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, using this method you can only write to a document, you can't go back into 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 groovy DHTML techniques that allow manipulation of an already written document, but that is beyond the scope of a basic Javascript tutorial. We'll get into that another day.

<< BACK NEXT >>
Javascript Tutor
Lessons: 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
Javascript Authoring Guide      JavaScript FAQ
HTML 4.0 Reference      Google Groups (Advanced Search)