Learn Advanced JavaScript Programming

Using Event Handlers Within a Frame

A child frame normally contains an HTML document. As opposed to a frame-setting document, an HTML document in a child frame is structured as a standard HTML document:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

You can load any document in a frame, regardless of its content. If a frame does not contain another frame-setting document, you can use any event handler in its document. You can issue, for example, an onLoad event handler in the <BODY> tag, an onSubmit event handler in a <FORM> tag, and so forth.

HTML documents that users see in frames of a multiple-frame browser window are different from the frame-setting document, in that the latter remains in memory and is not otherwise visible to the user. It only instructs the browser to divide the window into sections, and assigns a visible document to each one of them. Since a child frame’s document is visible, it can consist of forms, links, image maps, images, etc., which are rich in events and event handlers. As a document in a frame behaves exactly like a document in a single-frame browser window, the common event handler rules apply.

Using Event Handlers in a Frame-Setting Document

A frame-setting document differs from a regular HTML document in that it is not visible, and, therefore, does not include any output-generating HTML tags. Nevertheless, a frame-setting document can feature several event handlers which are very important for a frame set.

All event handlers that you normally issue within a <BODY> tag can be issued within a <FRAMESET> tag. An onLoad event handler within a <FRAMESET> tag, for example, specifies a JavaScript code to be executed when all frames defined in that frameset have finished loading. Therefore, the onLoad event handler in the <BODY> tag of a child frame triggers before the onLoad event handler in the <FRAMESET> tag. When all frames under its control have finished loading, the frameset that governs the frames receives a separate load event.

onFocus and onBlur

Netscape Navigator 3.0 introduced a new functionality to the onFocus and onBlur event handlers. You can use these event handlers to capture focus and blur events that are associated with a frame. A frame gains focus when the user clicks anywhere in that frame or issues a focus event in an element of that frame. A frame’s blur event occurs when the frame loses focus.

There are two equivalent ways to specify an onFocus or an onBlur event handler for a single frame:

In the <BODY> tag of the frame’s document.
In the <FRAMESET> tag of the frame-setting document. You can execute, for example, the statement frames[0].onfocus = display from a script within the frame-setting document. An event handler specified using this technique overrides an event handler issued in the child frame’s <BODY> tag.

Never use an alert() method or any other dialog box within a frame’s onFocus event handler. Doing so results in an endless loop: When you press OK to dismiss the alert, the underlying window gains focus again, and produces another focus event.

The following <BODY> definition of a frame’s document demonstrates a common usage of the onBlur and onFocus event handlers:

<BODY BGCOLOR="lightgray" onBlur="document.bgColor='lightgray'"
onFocus="document.bgColor='antiquewhite'">

The frame’s background color depends on whether or not the frame has focus.

Emulating Events

As with many other events, you can emulate the blur and focus events via their corresponding methods. You can use, for instance, the following statement to focus on the first frame from the point of view of another frame:

self.parent.frames[0].focus()

The same applies to the blur() method:

self.parent.frames[0].blur()

Since it is barely noticeable when a frame gains or loses focus, these methods are not that useful. They are not supported altogether by IE 3.0x.

Targeting Multiple Frames

Creating a link in one frame to load a document in a different frame requires a simple HTML attribute—TARGET. Consider the following frameset:

<FRAMESET ROWS="150, *">
 <FRAME NAME="one" SRC="docA.htm">
 <FRAMESET COLS="120, *">
  <FRAME NAME="two" SRC="docB.htm">
  <FRAME NAME="three" SRC="docC.htm">
 </FRAMESET>
</FRAMESET>

A link in docA.htm that loads Netscape’s homepage in the right frame (three) would use the following syntax:

<A HREF="http://www.netscape.com/" TARGET="three">Netscape</A>

Now suppose you want a single link in docA.htm to load both Netscape’s page in the frame named three and Microsoft’s page in the frame named two. JavaScript’s object hierarchy enables such operations:

<SCRIPT LANGUAGE="JavaScript">
<!--

function loadPages() {
  parent.two.location.href='http://www.microsoft.com/'
  parent.three.location.href='http://www.netscape.com/'
}

// -->
</SCRIPT>
<A HREF="javascript:loadPages()">Microsoft and Netscape</A>

Summary

Frames are widely used because they enable Web site designers to organize data in a pleasant, structured format. Frames are very easy to handle with JavaScript. An understanding of the JavaScript object model is required in order to take advantage of the language’s powerful frame-handling features. Some frame operations can be accomplished only by JavaScript. The only way, for example, to load several documents in different frames when the user clicks a link is by scripting the link’s event handler via JavaScript. Referencing objects in JavaScript can be done with the self, window, or no prefix at all. Mastering frames usually requires practice. After creating a few JavaScript applications with frames, you will have the knowledge to do virtually anything with frames. In the following chapter, we take a look at creating and handling browser windows with JavaScript. Windows are very similar to frames.