Rough Guide To The DOM (part 2) - In The Frame (
Page 5 of 8 )
It's also
interesting to see how the DOM works with frames. Consider the following
example, which sets up two frames, "left.html" and "right.html".
<html>
<head>
</head>
<frameset cols="20%,*">
<frame name="left" src="left.html" scrolling="auto" frameborder="no">
<frame name="right" src="right.html" scrolling="auto" frameborder="no">
</frameset>
</html>
In order to illustrate how to navigate across frames, I'm
going to write a simple script which changes the background colour of the right
frame when the appropriate link is clicked in the left frame. Here's the right
frame
<html>
<head>
</head>
<body id="body">
</body>
</html>
and here's the left frame - note how each link calls the
changeFrameBackground() function with a color as parameter.
<html>
<head>
</head>
<body>
<a href="javascript:changeFrameBackground('red')">Red</a>
<br>
<a href="javascript:changeFrameBackground('blue')">Blue</a>
<br>
<a href="javascript:changeFrameBackground('green')">Green</a>
<br>
<a href="javascript:changeFrameBackground('black')">Black</a>
</body>
</html>
Finally, let's take a look at the function which does all
the work.
<script language="JavaScript">
var bodyObj = top.right.document.getElementById("body");
function changeFrameBackground(col)
{
bodyObj.setAttribute("bgcolor", col);
}
</script>
Since this is a frameset, it's necessary to prefix the
document.getElementById() method call with a reference to the appropriate frame.
This prefix is necessary to identify to the DOM which frame is being called, and
to obtain a reference to the correct document tree.
Once a reference to
the right frame's <body> tag is obtained, changing the frame's background
colour is a simple setAttribute() away.
This article copyright Melonfire 2001. All rights
reserved.
/ 5 
