Let's talk about exceptions ...
How do you handle exceptions? Do you think upfront about the type of exceptions that you want to catch or do you just let the outside world handle it?

-- Jeroen van Bergen in JW Blogs

Newsletter sign-up

Sign up for our technology specific newsletters.

Enterprise Java
View all newsletters
Email Address:
JavaWorld.com

JavaScript and Netscape Frames

Site creators get greater control over content presentation

By Rawn Shah, JavaWorld.com, 04/01/96

In the last issue we discovered JavaScript, the new language that allows HTML developers to take their pages and forms one step closer to interactivity and client-side programming. Now that we have learned the basic JavaScript syntax, we are ready to tackle the job developing useful JavaScripts.

In this article we will be looking at some examples of useful programs that can be written and how they are written. With these examples in hand, you should have the confidence to try some programs of your own. We will also talk more about multiple frames with JavaScript, event handlers, and objects and how they are used in this issue.

Netscape Frames

Netscape did a very nice thing by adding frames capability to the list of possible document characteristics. Although still considered non-standard (i.e., it hasn't been approved by the World Wide Web consortium and the IETF), frames allow creation of multiple document windows within one browser. Each frame appears to act like a separate browser windows, displaying multiple information sources simultaneously. Within each frame you can scroll up and down, and perform all the things that you would normally do within a single browser window. Frames allow you to create a complex document that can help you present information in a more useful manner.

Additionally, the links in a frame can control what is displayed in other frames or windows. This helps you create indices or quick tabs that allow easier navigation through a single document or groups of documents. When a user clicks a link in the index frame it can cause a different page to appear within another frame. The advantage here is that the index frame is always available to the user.

With JavaScript, this control becomes even more useful. Although the browser cannot re-render a page that has already been brought up, you can send the other frames off to display new URLs or information. You can also access resources such as input fields and other form elements in the other frames. With this you can set events to change information in the other frames easily. We will quickly go over the Netscape FRAME system so that I know that we're on the same track. If you're going to use JavaScript, this new document system will come in very handy.

Within the HTML you can now define a set of FRAMEs that constitute the virtual page. Each FRAME can contain its own text that is independent from the others or can refer to another HTML file to be displayed within itself. To maintain compatibility with older browsers, there is a NOFRAMES tag pair that displays alternative pages on the screen of non-Netscape 2.0 browsers. To have real compatibility, you should have a frame reference a separate HTML file for itself. Let's begin by defining the parent page: 

<HTML>
<HEAD>
<TITLE>A Framed Document</TITLE>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<NOFRAMES>
This text is a placeholder for other non-Netscape 2.0 browsers. You will need a 
version of Netscape 2.0 or a browser that is compatible with Netscape 
FRAMEs to see this page properly. <P>
</NOFRAMES>
    <FRAME NAME="Header" SRC="FRHead.html">
    <FRAME NAME="Body" SRC="FRBody.html">
    <FRAME NAME="Footer" SRC="FRFooter.html">
</FRAMESET>
</HTML>
Figure 1: A Generic Multiframe Document

You will notice that there is no BODY tag within the document. A multiframe document should not have a BODY tag pair in the FRAMESET HTML file. This document above is divided into three rows. The percentages indicate how much of the browser window will constitute each of the rows. The first row is contained in a frame called 'Header' and the contents are kept in the file 'FRHead.html' and similarly for the second and third rows. You can also specify the size in a fixed number of pixels or just place an asterisk for one of the rows to indicate that that row will take up the rest of the space of the browser that is available. You can indicate a number of other options for frames but I won't go through all the details, that would require a whole article in itself. Instead, I direct you to the information at Netscape's site on FRAMEs and another tutorial on how to use them, listed at the end of this article.

Frames with JavaScript

Each frame within the browser can be considered a subdocument under the entire browser document object itself. The parent document object for is just simply called document. From the parent, each frame can be accessed as a field/child-object within the parent object. For example, 

document.frames[0].location = "http://www.javaworld.com"


This line of JavaScript will set the first frame object within the document to display the page at the given URL. The frames are numbered according to the way they are listed in the main document HTML file. Given the HTML file in Figure 1, the Header Frame will be frames[0], the Body, frames[1], and the Footer as frames[2]. Note that the numbering begins at 0. This is the same as the common practice in C, C++ and Java.

Each frame can also access the objects of its parent and indirectly of other frames in the document. Every given object has a parent, whether implicitly or explicitly identified. The parent of any variable that you create is the JavaScript list, which is a child of the Netscape Navigator object. This list contains all the scripts that are currently running in the browser. The parent of each input box in an HTML form is Form object, whose parent in turn is the frame object (if any) and whose parent, in turn, is the document object. The parent object of the document is the Navigator. This does not, however, go on forever. At the very top, also known as the root object, the grandfather of every object, is the Navigator object.

For one object to access another, you have to first indicate how to get there. For one frame to communicate with the objects of another, you go through their common parent, the document object. For example, all the statements in the following example accomplish the same task: 

parent.frames[0].inputfield.value = 'Blankety blank';
parent.frames.Body.inputfield.value = 'Blankety blank';
document.frames.Body.inputfiled.value = 'Blankety blank';


If you notice the second line accesses the second frame (the 'Body' frame in Figure 1) using its name directly. This is the name assigned to the frame in the main HTML document or the parent document of this frame. Netscape made it easy to iterate the list of frames within an object as an array as well as being able to access the frames by name. The document object properties like location, base font size, background color, etc. also apply. The following is an example where one frame called the "Controlling Frame" changes the properties of another (the "Passive Frame"): 


<HTML>
<HEAD>
<TITLE>A Framed Document</TITLE>
</HEAD>
<FRAMESET ROWS="75%,25%">
<NOFRAMES>
This text is a placeholder for other non-Netscape 2.0 browsers. You will need a version of Netscape 2.0 or a browser that is compatible with Netscape 
FRAMEs to see this page properly. <P>
</NOFRAMES>
        <FRAME NAME="Control" SRC="jw-04-javascript.fig2b.html">
        <FRAME NAME="Passive" SRC="about:blank">
</FRAMESET>
</HTML>
Figure 2a: The Passive Frame 

<HTML>
<HEAD>
<TITLE>The Control Frame</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function definitions()
{
  definitions["control frame"] = "The frame window that exhibits control functions over other parts of the browser or other frames";
  definitions["HTML"] = "The HyperText Markup Language";
  definitions["passive frame"] = "A frame window that displays information depending upon an action sent by another part of the browser";
}

function ShowDefinition(highlightedText)
{

  var passfr = parent.frames.Passive.document;
  passfr.open();
  passfr.write("<HTML><HEAD></HEAD><BODY>");
  passfr.write("<FONT SIZE='+2'>Help On: </FONT>");
  passfr.write("<FONT SIZE='+1'>" + highlightedText + "</FONT><P>");
  passfr.write(definitions[highlightedText]);
  passfr.write("</BODY></HTML>");
  passfr.close();
}

// -->
</SCRIPT>
<BODY ONLOAD="definitions()">
<P> 
The <A HREF="" ONMOUSEOVER="ShowDefinition('control frame')">control frame</A> contains text or <A HREF="" ONMOUSEOVER="ShowDefinition('HTML')">HTML</A> that causes 
actions to appear in the <A HREF="" ONMOUSEOVER="ShowDefinition('passive frame')">passive frame</A>. 
This JavaScript example will show definitions of highlighted text in the
passive frame window. Simply move your mouse over any of the links in this
document and see the text appear in the Help window below. 
</P>
<P>
- Rawn
</P>
</BODY>
</HTML>


Figure 2b: The Controlling Frame

The Passive frame in this example is a blank non-existing document created with the special URL about:blank. With this simple set of scripts you can create a help subwindow that explains all that you need to know about the links in the main window. This script just prints a set of text within the other frame. If you notice when you move your mouse over the highlighted text, the script in the control window opens a new blank document in the passive frame and write a description for the specific object in question.

If you would rather have it link to a page you have already created, you would need to simply toss out all the lines of code that open, write to, and close the other document, and replace them with a single line:

Resources