 |
|
 |
| Password Protecting Your Web Pages |  |
|
|
When using frames on your web site, you might find it sometimes desirable to update more than one frame at the same time with just one mouse click. This is not possible to do with HTML, but it can be done by using JavaScript.
Defining the Frames:
The first step in getting multiple frames to update with a single mouse click is to understand how JavaScript recognizes the frames on page (if you're not familiar with frames, you can read all about using them in our frames tutorial. When frames are defined on a web page, they are placed into an array (or table) that can be accessed by using JavaScript. Each FRAME on a page is placed into this array and can be referenced by a number in the order in which they're defined, starting with the number 0 (the first FRAME defined). For example, let's say you've got a page that defines frames in the following manner:
<FRAMESET ROWS="*,75">
<FRAMESET COLS="160,*">
<FRAME NAME="frame_one" SRC="logopage.htm">
<FRAME NAME="frame_two" SRC="mainpage.htm">
</FRAMESET>
<FRAME NAME="frame_three" SRC="navpage.htm">
</FRAMESET>
|
In this example, we've created a page that has three frames, with two frames on top with the left frame 160 pixels wide (frame_one), above a frame across the bottom of the page that is 75 pixels high (frame_three).
Referencing the Frames:
To reference "frame_one" using JavaScript, we could do so by using "parent.frames[0]". "frame_two" could be referenced using "parent.frames[1]", and "frame_three" could be referenced using "parent.frames[2]". An alternative, and possibly easier to remember, way of referencing the frames on a page is by explicitly using the NAME of each frame. For example, it's also possible to use "parent.frame_one", "parent.frame_two" and "parent.frame_three" to reference each of the frame's properties and methods in our example.
Change the Page Being Displayed in a Frame:
Once you know how to reference each frame, you then need to know how to use JavaScript to change the page that's being displayed in a particular frame. This is done by assigning a new value to the frame's "location.href" property. For example, let's say that we wanted to change the page being displayed in "frame_two" from what's currently being displayed ("mainpage.htm"), to "pagetwo2.htm". To do this, a line like the following would be added to your JavaScript function that's called when you click on a hyperlink:
|
parent.frames[1].location.href = "pagetwo2.htm"
|
If you prefer to use the frames NAME, you'd do something like this:
|
parent.frame_two.location.href = "pagetwo2.htm
|
Both of these lines will accomplish the same thing. Use the one that easiest for you.
Building the Link:
Now that you know how to reference the location property of a frame, the next step is to build the link that when clicked on will do something, which in this case would be to update two frames at the same time when the link is clicked on. To do this, add a line similar to this:
|
<A HREF="#" onClick="parent.twoFrames('pageone1.htm','pageone2.htm')">Page One</A>
|
What this line does is create "Page One" as a hyperlink. When "Page One" is clicked on the JavaScript function called "twoFrames" is called, and two page names are passed to the "twoFrames" function ("pageonn1.htm" and "pageone2.htm"). The "#" for the HREF is just a dummy reference that doesn't really do anything and is only there as a means to help build the hyperlink. Pay special attention to the order and placement of the single and double quotation marks. This order is important, and if one is misplaced, your JavaScript function will not work.
Creating the JavaScript Function:
The final step is to create the "twoFrames" JavaScript function that actually does all the work and is called when you click on the link. The "twoFrames" function would look something like the following, and would be placed in the HEAD section of the page that builds your framesets:
<SCRIPT LANGUAGE="JavaScript">
<!-- //Hide from older browsers
var leftFrame=null
var rightFrame=null
function twoFrames(leftFrame,rightFrame) {
parent.frames[0].location.href = leftFrame;
parent.frames[1].location.href = rightFrame;
}
// end hiding -->
</SCRIPT>
|
What this code does is first identifies the SCRIPT as JavaScript. The next line is the beginning of an HTML comment that is used to prevent the SCRIPT code from displaying in your page in older browsers that don't support JavaScript. The next two lines define and initialize two variables (leftFrame and rightFrame). The next line creates the "twoFrames" function and tells the function to accept two parameters to be passed to it when the function is called by clicking on a hyperlink (or whatever other event might call "twoFrames"). The next two lines tell the browser to load the URL of the pages passed to it into the appropriate frames, which in this case are the upper left and upper right hand frames, respectively. The final three lines simply end the function definition, end the comment that hides the script from older browsers, and ends the SCRIPT definition.
In this example, the function "twoFrames" is only used to change the pages that are displayed in two frames. It could, however, be used to update more than two frames, as well as to do other little JavaScript tricks.
Learn More:
If you're interested in learning more about JavaScript as well as to find other JavaScripts that can be added to your page, check out the sites listed on Nuthin' but Links' Java and JavaScript links page.
|
|
