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>
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.
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) |
![]() |