JavaScript lets you create and manipulate windows and frames for presenting HTML content. The window object is the top-level object in the JavaScript client hierarchy; Frame objects are similar to window objects, but correspond to "sub-windows" created with the FRAME tag in a FRAMESET document.

Opening and Closing Windows

A window is created automatically when you launch Navigator; you can open another window by choosing New Navigator Window from the File menu. You can close a window by choosing either Close or Exit from the File menu. You can also open and close windows programmatically with JavaScript.

Opening a Window

You can create a window with the open method. The following statement creates a window called msgWindow that displays the contents of the file sesame.html:

msgWindow=window.open("sesame.html")

The following statement creates a window called homeWindow that displays the Netscape home page:

homeWindow=window.open("http://home.netscape.com")

Windows can have two names. The following statement creates a window with two names. The first name, msgWindow, is a variable that refers to the window object. This object has information on the window's properties, methods, and containership. When you create the window, you can also supply a second name, in this case displayWindow, to refer to that window as the target of a form submit or hypertext link.

msgWindow=window.open("sesame.html","displayWindow")

A window name is not required when you create a window. But the window must have a name if you want to refer to it from another window.

msgWindow=window.open
   ("sesame.html","displayWindow","toolbar=no,scrollbars=yes")

Closing a Window

You can close a window with the close method. You cannot close a frame without closing the entire parent window.

window.close()
self.close()
close()

Do not use the third form, close(), in an event handler. Because of how JavaScript figures out what object a method call refers to, inside an event handler it will get the wrong object.

msgWindow.close()

Using Frames

A frameset is a special type of window that can display multiple, independently scrollable frames on a single screen, each with its own distinct URL. The frames in a frameset can point to different URLs and be targeted by other URLs, all within the same window. The series of frames in a frameset make up an HTML page.

Creating a Frame

You create a frame by using the FRAMESET tag in an HTML document; this tag's sole purpose is to define the frames in a page.

<FRAMESET ROWS="90%,10%">
   <FRAMESET COLS="30%,70%">
      <FRAME SRC=category.html NAME="listFrame">
      <FRAME SRC=titles.html NAME="contentFrame">
   </FRAMESET>
   <FRAME SRC=navigate.html NAME="navigateFrame">
</FRAMESET>

Example 2. Alternatively, you could create a window like the previous one but in which the top two frames have a parent separate from navigateFrame. The top-level frameset would be defined as follows:

<FRAMESET ROWS="90%,10%">
   <FRAME SRC=muskel3.html NAME="upperFrame">
   <FRAME SRC=navigate.html NAME="navigateFrame">
</FRAMESET>

The file muskel3.html contains the skeleton for the upper frames and defines the following frameset:

<FRAMESET COLS="30%,70%">
   <FRAME SRC=category.html NAME="listFrame">
   <FRAME SRC=titles.html NAME="contentFrame">
</FRAMESET>

Updating a Frame

You can update the contents of a frame by using the location property to set the URL, as long as you specify the frame hierarchy.

<INPUT TYPE="button" VALUE="Titles Only"
   onClick="top.frames[0].location='artists.html'">

When a user clicks this button, the file artists.html is loaded into the frame upperFrame; the frames listFrame and contentFrame close and no longer exist.

Referring To and Navigating Among Frames

Creating and Updating Frames: an Example

The file category.html (the categorical list) contains code similar to the following:

<B>Music Club Artists</B>
<P><B>Jazz</B>
<LI><A HREF=titles.html#0001 TARGET="contentFrame">Toshiko Akiyoshi</A>
<LI><A HREF=titles.html#0006 TARGET="contentFrame">John Coltrane</A>
<LI><A HREF=titles.html#0007 TARGET="contentFrame">Miles Davis</A>
<LI><A HREF=titles.html#0010 TARGET="contentFrame">Dexter Gordon</A>

<P><B>Soul</B>
<LI><A HREF=titles.html#0003 TARGET="contentFrame">Betty Carter</A>
<LI><A HREF=titles.html#0004 TARGET="contentFrame">Ray Charles</A>
...

The file alphabet.html (the alphabetical list) contains code similar to the following:

<B>Music Club Artists</B>
<LI><A HREF=titles.html#0001 TARGET="contentFrame">Toshiko Akiyoshi</A>
<LI><A HREF=titles.html#0002 TARGET="contentFrame">The Beatles</A>
<LI><A HREF=titles.html#0003 TARGET="contentFrame">Betty Carter</A>
<LI><A HREF=titles.html#0004 TARGET="contentFrame">Ray Charles</A>
...

The file navigate.html (the navigational links at the bottom of the screen) contains code similar to the following. Notice that the target for artists.html is "_parent." When the user clicks this link, the entire window is overwritten, because the top window is the parent of navigateFrame.

<A HREF=alphabet.html TARGET="listFrame"><B>Alphabetical</B></A>
&nbsp&nbsp&nbsp
<A HREF=category.html TARGET="listFrame"><B>By category</B></A>
&nbsp&nbsp&nbsp
<A HREF="artists.html" TARGET="_parent">
   <B>Musician Descriptions</B></A>

The file titles.html (the main file, displayed in the frame on the right) contains code similar to the following:

<A NAME="0001"><H3>Toshiko Akiyoshi</H3></A>
<P>Interlude

<A NAME="0002"><H3>The Beatles</H3></A>
<P>Please Please Me

<A NAME="0003"><H3>Betty Carter</H3></A>
<P>Ray Charles and Betty Carter
...

Referring to Windows and Frames

Referring to a Window's Properties, Methods, and Event Handlers

if (document.musicForm.checkbox1.checked) {
   alert('The checkbox on the musicForm is checked!')}

Example 2: refer to another window. The following statements refer to a form named musicForm in a window named checkboxWin. The statements determine if a checkbox is checked, check the checkbox, determine if the second option of a Select object is selected, and select the second option of the Select object. Even though object values are changed in another window (checkboxWin), the current window remains active: checking the checkbox and selecting the selection option do not give focus to the window.

// Determine if a checkbox is checked
if (checkboxWin.document.musicForm.checkbox2.checked) {
   alert('The checkbox on the musicForm in checkboxWin is checked!')}

// Check the checkbox
checkboxWin.document.musicForm.checkbox2.checked=true

// Determine if an option in a Select object is selected
if (checkboxWin.document.musicForm.musicTypes.options[1].selected)
   {alert('Option 1 is selected!')}

// Select an option in a Select object
checkboxWin.document.musicForm.musicTypes.selectedIndex=1

Example 3: refer to a frame in another window. The following statement refers to a frame named frame2 that is in a window named window2. The statement changes the background color of frame2 to violet. The frame name, frame2, must be specified in the FRAMESET tag that creates the frameset.

window2.frame2.document.bgColor="violet"

Referring to a Window in a Form Submit or Hypertext Link

You use a window's name (not the window variable) when referring to a window as the target of a form submit or hypertext link (the TARGET attribute of a FORM or A tag). The window you specify is the window into which the link is loaded or, for a form, the window in which server responses are displayed.

<FORM>
<INPUT TYPE="button" VALUE="Open Second Window"
   onClick="msgWindow=window.open('','window2',
   'resizable=no,width=200,height=200')">
<P>
<A HREF="doc2.html" TARGET="window2"> Load a file into window2</A>
<P>
<INPUT TYPE="button" VALUE="Close Second Window"
   onClick="msgWindow.close()">
</FORM>

If the user selects the Open Second Window button first and then the link, Communicator opens the small window specified in the button and then loads doc2.html into it.

Navigating among Windows and Frames

Many Navigator windows can be open at the same time. The user can move among these windows by clicking them to make them active, or give them focus. When a window has focus, it moves to the front and changes visually in some way. For example, the color of the window's title bar might change. The visual cue varies depending on which platform you are using.

checkboxWin=window.open("doc2.html")
...
checkboxWin.document.musicForm.city.focus()

Example 2: give focus to another window using a hypertext link. The following statement specifies window2 as the target of a hypertext link. When the user clicks the link, focus switches to window2. If window2 does not exist, it is created.

<A HREF="doc2.html" TARGET="window2"> Load a file into window2</A>