|
What a combination! A two-part tutorial on using JavaScript with frames, including how
to change two frames at the same time.
JavaScript and Frames. Frames and JavaScript. Sounds like a mess doesn't it? Well, it does make things a bit more complicated.
Let's see if we can figure out how to get those frames to work with our scripts.
The first thing you will want to know is "How in the land of JavaScript
do I access javascript variables and other things in one frame from
another frame? The answer is to use a trick like this:
parent.framename.attributes_to_change
Replacing framename with the name you gave the frame in your frameset, ie:
<FRAME src="jex14.htm" name="right_frame">
In this case, you would access something in that frame with:
parent.right_frame.attributes_to_change
Let's start by changing the value of a text box in a frame on
the right from a frame on the left side. First, set up a little
frameset. This will require 3 separate html pages. Your frameset, and
the html for your 2 frames. Let's begin with the frameset:
<HTML>
<HEAD>
<TITLE>Frames Values</TITLE>
</HEAD>
<FRAMESET cols="20%,80%">
<FRAME src="jex13.htm" name="left_frame">
<FRAME src="jex14.htm" name="right_frame">
</FRAMESET>
</HTML>
The two pages I will use inside the frameset are "jex13.htm" and "jex14.htm".
The left side (jex13.htm) will have this html code:
<HTML>
<HEAD>
<TITLE>JavaScript Example 13</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT type="button" value="What is cool?"
onClick="parent.right_frame.document.form1.text1.value='Me!'">
</FORM>
</BODY>
</HTML>
This is where we use our new command, inside the onClick=" " command:
onClick="parent.right_frame.document.form1.text1.value='Me!'"
As you can see, we access the right frame with the "parent.right_frame." and then we add what we want to
change onto the end. Since we want to change something inside the document object, we have to use
"parent.right_frame.document.". If you leave out the "document" the browser defaults to using the "window" object, which we
will use later on. But for now, we want the "document" object. Now, to access the form, we tack on the name of the form,
"parent.right_frame.document.form1.". Then, we access the textbox by adding the name of the textbox onto it:
"parent.right_frame.document.form1.text1.". Finally, we can access the value attribute of the textbox by placing
value at the end, and assigning it a value with the eqaul sign:
"parent.right_frame.document.form1.text1.value='Me!'"
So, we now have a button that will change a textbox in the
right_frame. The html code for the right frame (jex14.htm) is simply a
form with an empty textbox:
<HTML>
<HEAD>
<TITLE>JavaScript Example 14</TITLE>
</HEAD>
<BODY>
<FORM name="form1">
<INPUT type="text" name="text1" size="25" value="">
</FORM>
</BODY>
</HTML>
|
Tutorials 
