Sponsored Links
JavaScript and Netscape Frames
Site creators get greater control over content presentation
- Feedback
- Discuss
Page 2 of 5
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>
<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:
passfr.location = "http://www....."; // URL needed
Now instead of sending in lines of text, simply give the URL that the file should link to and it will display the entire file within that window.
The hIdaho Frame Tools
Bill Dortch, one of this column's co-writers on JavaScript, has developed a useful JavaScript collection that will help you work with frames and JavaScript in a much easier way. This is known as the hIdaho frameset and is already in use in several places. This tool provides a way to access functions across frames without requiring the specific locations of any. It simplifies the task of creating large dynamic JavaScript applications by reducing the possibility of bugs and promoting reuse of components and functions.
Each frame registers itself with the main document under a unique name and can then be addressed by this name anywhere in the code. You can then execute functions in other frames using a special function called Exec(). Keep in mind that this function is separate from the JavaScript exec keyword.
The Color Center is a useful utility for color management on Web sites that employs the hIdaho Frameset design. Without this tool, this utility would be twice as complex and harder to understand.
Event Handlers
An Event Handler is mechanism that executes a predefined action when a certain condition becomes true. This condition is called the event. In a windowing environment like Microsoft Windows, MacOS, and X-Windows, events are constantly being generated and processed. Some are processed at the system level; for example, when you click on the empty trash menu item in MacOS, the system receives and processes the event as an order to delete all the files in the trash can. Other events are handled by individual applications; these events are only generated by the foreground application; for example, when you click on Open in the File menu in MS Word, the application responds by showing you a dialog box of files you can open. Yet another mechanism allows background applications to receive and process events; for example, when the X-Windows Netscape sitting in the background receives data from the remote site, it processes the Data Transferred event.
In JavaScript, you can specify functions to be executed for application events, like when the document loads initially, when a user clicks on a button, or when an input field's data changes. The table shows the list of all events handled by JavaScript in Netscape 2.0:
- Feedback
Resources
- Netscape's Frames Tutorial http://home.netscape.com/assist/net_sites/frames.html
- A better Netscape Frames Tutorial http://www.newbie.net/frames
- NetScape JavaScript Documentation http://home.netscape.com/eng/mozilla/2.0/handbook/javascript/index.html
- The hIdaho Frameset tools http://www.hidaho.com/frameset
About Us | Advertise | Contact Us | Terms of Service/Privacy
Copyright, 2006-2008 Network World, Inc. All rights reserved.