JavaScript can be used to give you greater control over the content of frames in your web pages. The following example illustrates several possibilities. Create a new file called frames.html and enter the following text:
<HTML><HEAD>
<TITLE>I've been framed!</TITLE>
</HEAD><FRAMESET ROWS="20%,40%,40%">
<FRAME SRC="frame-1.html" NAME="frame1" NORESIZE>
<FRAME SRC="frame-2.html" NAME="frame2" NORESIZE>
<FRAME SRC="frame-3.html" NAME="frame3" NORESIZE></FRAMESET>
</HTML>
This web page creates a set of three frames. Each frame loads one of the web pages defined below. Create a new file called frame-1.html and enter the following text:
<HTML><HEAD>
</HEAD><BODY BGCOLOR="#ffffff">
<CENTER>
<H1>This is frame #1</H1>
</CENTER>
</BODY>
</HTML>
Create a new file called frame-2.html and enter the following text:
<HTML><BODY BGCOLOR="#ffffff">
<CENTER>
<H1>This is frame #2</H1>
</CENTER>
</BODY>
</HTML>
Create a new file called frame-3.html and enter the following text:
<HTML><BODY BGCOLOR="#ffffff">
<CENTER>
<H1>This is frame #3</H1>
<P>
<FORM NAME="buttons"><INPUT TYPE="button" VALUE="Red" ONCLICK="parent.frame2.document.bgColor='red'">
<INPUT TYPE="button" VALUE="Blue" ONCLICK="parent.frame2.document.bgColor='blue'">
<INPUT TYPE="button" VALUE="Green" ONCLICK="parent.frame2.document.bgColor='green'">
<INPUT TYPE="button" VALUE="Orange" ONCLICK="parent.frame2.document.bgColor='orange'"></FORM>
</P></CENTER>
</BODY>
</HTML>
View frames.html using your web browser. Try the various buttons in the bottom frame. What happens? The statements in the ONCLICK event handlers tell this frame's parent (the enclosing window) to tell frame2 to tell its document to change its background to the specified color. Add the following JavaScript code to frame-1.html immediately between the <HEAD> tag and the </HEAD> tag:
<SCRIPT LANGUAGE="JavaScript">
function door1() {
parent.frame2.document.open();
parent.frame2.document.write("<P>Congratulations! You won a goat</P>");
parent.frame2.document.close();}
function door2() {
parent.frame2.document.open();
parent.frame2.document.write("<P>Congratulations! You won a fur ball!</P>")
parent.frame2.document.close();}
function door3() {
parent.frame2.document.open();
parent.frame2.document.write("<P>Congratulations! You won a new sports car!</P>");
parent.frame2.document.close();}
</SCRIPT>
Add the following HTML to frame-3.html following the other form definition:
<P>
<FORM NAME="buttons">
<INPUT TYPE="button" VALUE="Door #1" ONCLICK="parent.frame1.door1()">
<INPUT TYPE="button" VALUE="Door #2" ONCLICK="parent.frame1.door2()">
<INPUT TYPE="button" VALUE="Door #3" ONCLICK="parent.frame1.door3()"></FORM>
</P>
View frames.html using your web browser again. Try clicking one of the new buttons. What happens? The JavaScript code you added to frame-1.html added three functions. Each function creates a new document in the second frame and writes some text into that document. The new document is then closed to insure that the written text actually shows up in the window. The buttons you added to frame-2.html call the functions in frame-1.html, by asking this frame's parent (the enclosing window) to tell frame1 to do the specified function.
Try changing the functions in frame-1.html to write to frame1 instead of frame2. What happens when you click one of the "Door" buttons a second time?
Add at least four more buttons to change the background color of the second frame. Add at least two more buttons to write other text messages into the second frame.