Home | Windows | Linux | Hardware | Shopping | Web Building | Downloads | Tech Support
Webpedia
 

 Front Door
 Animations
 Discussion
 Interviews
 Opinions
 Reports
 Tools
 Tutorials

 Downloads »

 Browse by subject.
Free Weekly Newsletter!

A free service rounding up the week's news, articles, tips and reviews.

text html
Internet News
Internet Stocks
Internet Technology
Web Developer
Internet Marketing
ISP
Downloads
Internet Resources
International

Search internet.com
Advertising Info
Corporate Info
Internet Trade Shows
Print this article
Email this article
Related Items

•  JavaScript

•  Download JavaScript Editors


  Webpedia / Tutorials



All Net Rearch -- in one place

Beginner's Guide to JavaScript
Frames Manipulation

Richie Lai

Frame manipulation is probably one of the most talked about topics of JavaScript. It works like everything else in JavaScript. Once you learn the object model, it should be the same throughout. Let's look at your typical FRAMESET.

<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="page1.html" NAME="page1">
<FRAME SRC="page2.html" NAME="page2">
</FRAMESET>
<FRAME SRC="page3.html" NAME="page3">
</FRAMESET> </CODE>

In this example, there are going to be three separate frames. Now let's say we want to click on a link on one page and have both frames change to something else. But before we do that, let's understand the heirarchy of the object model involved.

self.* means current window.
parent.* means the parent of current window.

To put this into perspective: if we created a FRAMESET with our index.html file, each of the separate frames would have to call its parent if it were to manipulate the location.href (the property of each window).

Now, the question is how to do this. Well, with JavaScript we can write a function that will interact with the other two frames! Let's see how to do this now. First, we have three pages, named page1.html, page2.html, and page3.html. The first two pages are pointless here since they are just blank holder pages; however, page three is the location of our scripting function, so let's look at it.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

function Switchframes(how)
{
if (how == "reverse")
{
parent.page1.location.href="page2.html";
parent.page2.location.href="page1.html";
}
else
{
parent.page1.location.href="page1.html";
parent.page2.location.href="page2.html";
}
}

</SCRIPT>
</HEAD>


This is page three.

Click <A HREF="JavaScript:Switchframes('reverse')">here</A> to reverse pages.

Click <A HREF="JavaScript:Switchframes('original')">here</A> to switch pages back to original.


</HTML>

We write a function here that is going to check a parameter to see how we handle the frames. As you can see, this is pretty straightforward. We check the parameter that gets passed in to see if it says reverse or original, and then we use our object model to point our frames where we want to!

Notice that most of this is very similar to what we have been doing--however, we called our script in a different way this time. It is being called inside an anchor tag. You can call any of your scripts with a JavaScript: moniker. This makes it possible to call scripts from image links and any other anchors that you want to use!

Next: The OnMouseOver Event »

Skip Ahead

1 Introduction and the Basics
2 General Information
3 Our First Script
4 Forms Manipulation
5 Frames Manipulation
6 The OnMouseOver Event
7 Summary


internet.com home | write us | search | help! | about us

 Copyright © 1999 internet.com Corporation. All Rights Reserved.
About internet.com Corp. | Press Releases
Privacy Policy | Career Opportunities