Frames and Windows

---

Frames are one of the most widely used new features of Navigator 2.0.

Using a few simple extensions to the HTML standard, Web authors are able to achieve sophisticated control over the layout of information in the web browser window by dividing the window into rectangular sections and loading separate HTML files into each section of the window.

In addition, links in one frame can update another frame - just as a button click in one form can affect another form (OOP), and the result of processing form data in a CGI script on a server can be targeted at another frame.

A page is divided into frames using the FRAMESET tag. The tag is used in the top-level document defining a window containing frames and is used to specify how to divide the document window.

The FRAMESET container tag takes several attributes. The two basic ones are ROWS and COLS. A FRAMESET tag takes either one of these or both to divide a document into a set of rows or columns. For instance,

would define three columns. The two outer columns would each be 25 pixels wide, and the middle column would take the remaining space depending on the size of the window. In this example the asterisk (*) represents the remaining available space after the space is allocated for the other frames.

In addition to specifying the size of frames in pixels, the size of columns and rows can be defined using percentages relative to the space available to the document.

This FRAMESET tag would divide the display into two rows. The top row would be 35 percent of the height of the display area, and the bottom row would fill the remaining space (using the asterisk again).

The FRAMESET ROWS and COLS tags can take 3 different values, as you can see from above - the absolute pixel value, given by just a number, the percentage value, which is the percentage of the user’s display resolution to be used, given in n% and the asterisk (*) which represents the remaining space. Each value provided in the ROWS or COLS tags will indicate an addition of one more row or column.

Inside a FRAMESET container, the FRAME tag is used to specify which files should be displayed in each frame. The URLs of the files-which can be relative or absolute-should be specified using the SRC attribute in the same way as the IMG tag is used to include images in an HTML document.

For example, the following creates a document with two rows.

The top is 35 percent of the available space, and the bottom takes up the remaining 65 percent. The file menu.html is loaded into the top frame, and the file welcome.html is displayed in the lower frame.

JavaScript provides the frames property of the window object for working with different frames from a script.

The frames property is an array of objects with an entry for each child frame in a parent frameset. The number of frames is provided by the length property.

For instance, in a given window or frameset with two frames, you could reference the frames as parent.frames[0] and parent.frames[1] and the index of the last frame as parent.frames.length.

The window object is the parent object of each loaded document.

Because the window object is the parent object for loaded documents, you usually do not need to explicitly refer to the window object when referring to its properties or invoking its methods. For this reason, window.alert() can be called by using alert(). Note that this is also the case when referring to the properties and methods of objects, functions and procedures that are present in one form when writing code for that form (OOP). However, likewise with Javascript, you can execute a method or change a property of another window in the current window, in this case the window name would have to be provided (the form name would have to be provided in OOP) - window1.alert() would be called if the window was called window1.

Using the status bar-the strip at the bottom of the Navigator window where you are told about the current status of document transfers and connections to remote sites-can be used by JavaScript programs to display custom messages to the user.

This is primarily done using the onMouseOver event handler, which is invoked when the user points at a hypertext link. By setting the value of self.status to a string, you can assign a value to the status bar (you could also use window.status or status in this example). In the program:

two different messages are displayed when the user points the mouse at the links. This can be more informative than the URLs that Navigator normally displays when a user points at a link.

Using the open() and close() methods, you have control over what windows are open and which documents they contain. They are equal in functionality to the Form.Show and Form.Hide methods respectively in OOPs. However, they contains more functions.

The open() method is the more complex of the two. It takes two required arguments and an optional feature list in the following form:

open("URL", "windowName", "featureList");

Here is the featureList is a comma-separated list containing any of the entries:

Name Description

toolbar Creates the standard toolbar

location Creates the location entry field

directories Creates the standard directory buttons

status Creates the status bar

menubar Creates the menu at the top of the window

scrollbars Creates scroll bars when the document grows beyond the current window

resizable Enables resizing of the window by the user

width Specifies the window width in pixels

height Specifies the window height in pixels

It is interesting to note that you can open a window and then write HTML into that window using document.writeln() and document.write().

For instance, the function newwindow() opens a new window and writes several lines of HTML into it.

The close() method is simpler to use:

window.close();

simply closes the current window.

In this example, you produce a simple function to implement status bar help in any HTML document. The function can be called from any event handler and will display a message in the status bar.

function help(message) {

self.status = message;

return true;

}

With this function, you can then implement full on-line pointers and help systems.