Sams Teach Yourself JavaScript in 24 Hours

Working with Frames

Browsers also support frames, which enable you to divide the browser window into multiple panes. Each frame can contain a separate URL or the output of a script.

Using JavaScript Objects for Frames

When a window contains multiple frames, each frame is represented in JavaScript by a frame object. This object is equivalent to a window object, but it is used for dealing specifically with that frame. The frame object's name is the same as the NAME attribute you give it in the <frame> tag.

Remember the window and self keywords, which refer to the current window? When you are using frames, these keywords refer to the current frame instead. Another keyword, parent, enables you to refer to the main window.

Each frame object in a window is a child of the parent window object. Suppose you define a set of frames using the following HTML:

<frameset ROWS="*,*" COLS="*,*">
<frame NAME="topleft" SRC="topleft.htm">
<frame NAME="topright" SRC="topright.htm">
<frame NAME="bottomleft" SRC="botleft.htm">
<frame NAME="bottomright" SRC="botright.htm">
</frameset>

This simply divides the window into quarters. If you have a JavaScript program in the topleft.htm file, it would refer to the other windows as parent.topright, parent.bottomleft, and so on. The keywords window and self would refer to the topleft frame.

By the Way

If you use nested framesets, things are a bit more complicated. window still represents the current frame, parent represents the frameset containing the current frame, and top represents the main frameset that contains all the others.

The `frames` Array

Rather than referring to frames in a document by name, you can use the frames array. This array stores information about each of the frames in the document. The frames are indexed starting with zero and beginning with the first <frame> tag in the frameset document.

For example, you could refer to the frames defined in the previous example using array references:

parent.frames[0] is equivalent to the topleft frame.
parent.frames[1] is equivalent to the topright frame.
parent.frames[2] is equivalent to the bottomleft frame.
parent.frames[3] is equivalent to the bottomright frame.

You can refer to a frame using either method interchangeably, and depending on your application, you should use the most convenient method. For example, a document with 10 frames would probably be easier to use by number, but a simple two-frame document is easier to use if the frames have meaningful names.

Try it Yourself

Using Frames with JavaScript

As a simple example of addressing frames using JavaScript, you will now create an HTML document that divides the window into four frames, and a document with a script for the top-left corner frame. Buttons in the top-left frame will trigger JavaScript event handlers that display text in the other frames.

To begin, you will need a frameset document. Listing 10.5 shows a simple HTML document to divide the window into four frames.

Listing 10.5. An HTML Document That Divides the Window into Four Frames

<frameset ROWS="*,*" COLS="*,*"> <frame NAME="top_left" SRC="topleft.html"> <frame NAME="top_right" SRC=""> <frame NAME="bottom_left" SRC=""> <frame NAME="bottom_right" SRC=""> </frameset>

The first frame defined here, top_left, to will contain an HTML document and a simple script. Listing 10.6 shows the HTML and JavaScript code for the top-left frame.

Listing 10.6. The HTML and JavaScript for the Frame Example

<html> <head> <title>Frame Test</title> <script language="javascript" type="text/javascript"> function FillFrame(framename) { // Find the object for the frame theframe=parent[framename]; // Open and clear the frame's document theframe.document.open(); // Create some output theframe.document.write("<h1>JavaScript Output</h1>"); theframe.document.write("<p>This text is in the "); theframe.document.write(framename + " frame.</p>"); } </script> </head> <body> <h1>Frame Test</h1> <form name="form1";> <input type="button" value="Top right" onClick="FillFrame('top_right');"> <input type="button" value="Bottom left" onClick="FillFrame('bottom_left');"> <input type="button" id="js" value="Bottom right" onClick="FillFrame('bottom_right');"> </form> </body> </html>

This document defines three buttons with event handlers that call the FillFrame() function with a parameter for the frame name. The function finds the correct child of the parent window object for the specified frame, uses document.open to create a new document in the frame, and uses document.write to display text in the frame.

To try this example, save Listing 10.6 as topleft.html in the same folder as the frameset document from Listing 10.5, and load Listing 10.5 into a browser. Figure 10.6 shows the result of this example after all three buttons have been clicked.

Figure 10.6. The frame example as displayed by Internet Explorer.

[View full size image]

Index: [SYMBOL][A][B][C][D][E][F][G][H][I][J][K][L][M][N][O][P][Q][R][S][T][U][V][W][X][Y]

Main Menu

	More Books
	PHP Hacks
	Processing Xml With Java - A Guide To Sax, Dom, Jdom, Jaxp, And Trax
	The Koran (Holy Qur'an)
	Macromedia Flash 8 Bible
	Search Engine Optimization for Dummies
	YouTube Traffic
	PHP 5 for Dummies
	Harry Potter and The Chamber of Secrets
	Harry Potter and the Sorcerer's Stone
	The Pilgrim's Progress
	Wireless Hacks
	Flash Hacks. 100 Industrial-Strength Tips & Tools
	PayPal Hacks. 100 Industrial-Strength Tips and Tools
	Amazon Hacks
	Pdf Hacks
	The Da Vinci Code
	Google Hacks
	The Holy Bible
	Windows XP For Dummies
	Harry Potter and the Half-Blood Prince
	Seo Book
	Upgrading and Repairing Networks
	Macromedia Dreamweaver 8 UNLEASHED
	Windows XP Annoyances
	Windows XP Hacks
	Microsoft Windows XP Power Toolkit
	Teach Yourself MS Office In 24Hours
	iPod & iTunes Missing Manual
	PC Hacks 100 Industrial-Strength Tips and Tools
	PC Overclocking, Optimization, and Tuning - 2th Edition
	PC Hardware In A Nutshell 3rd Edition
	PC Hardware in a Nutshell, 2nd Edition
	Upgrading and Repairing PCs
	Google for Dummies
	MySQL Cookbook
	Teach Yourself Macromedia Flash 8 In 24 Hours
	PHP CookBook
	Sams Teach Yourself JavaScript in 24 Hours
	PHP5 Manual

Free Games Paper Airplanes

500 Kostenlose Spiele

Sams Teach Yourself JavaScript in 24 Hours

Working with Frames

Using JavaScript Objects for Frames

The frames Array

Try it Yourself

Using Frames with JavaScript

Listing 10.5. An HTML Document That Divides the Window into Four Frames

Listing 10.6. The HTML and JavaScript for the Frame Example

Figure 10.6. The frame example as displayed by Internet Explorer.

The `frames` Array