- Level: Intermediate
- Skills Required: HTML Frames and Basic JavaScript
Scenario:
In our last article, we saw how to create frames using HTML and how to define A HREF links that change the contents of the same frame as well as in the other siblings frames. Today we will see how to refer to windows and frames in JavaScript. We will create a simple JavaScript driven page that has two frames; a button in one frame changes the background color of the other.
Frames Array:
Like links and images, when you define frames in HTML the web browser automatically creates corresponding objects that can be referred via JavaScript. Please read the last sentence once again. It's important.
Taking the example from the last article, suppose you have defined an HTML page (index.html) with frames as shown below:
<html>
<head>
<title>Frames Example</title>
</head>
<frameset cols="30%, 70%">
<frame name="menu" src="menu.html">
<frame name="content" src="home.html">
</frameset>
</html>
When they read this code, all JavaScript capable web browsers will create an array of frames whose elements can be accessed by
or
top.content.document.bgColor = "blue"
Remember, in JavaScript the array index begins with zero. A detailed example will clarify things.
Exploring Further:
Now we will do the example that we promissed in the beginning. Consider we have three pages: index.html (like the one defined above), home.html (the page whose background color will be changed) and menu.html (the page which will have a button to change the color of the second page). As described earlier, the role of index.html is just to define the two windows and load menu.html and home.html into them.
The code for index.html has already been given above. You can put whatever you like in home.html. The code for menu.html is given below. Study it carefully.
<html>
<head>
<script language="JavaScript">
function changeColor()
{
var color;
var index = document.example.color.selectedIndex;
color = document.example.color.options[index] .value;
top.frames[1].document.bgColor = color;
}
</script>
</head>
<body>
<P>This is menu.html.</p>
<p><form name="example">
<select name="color">
option value="#FFFFFF">White
option value="#D00000">Red
option value="#00A000">Green
</select>
<input type="button" value="Change Color" onClick="changeColor()">
</form></p>
</body>
</html>
Last Words:
This covers most of the concepts regarding frames and frame arrays. Do you have any questions? Or if you are stuck up somewhere, feel free to ask in Discussions Area. I repeat my statement:
Go To Page: 1 2
