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")
For more information on window names, see "Referring to windows and frames".Windows can have two names. The following statement creates a window with two names. The first name, msgWindow, refers to the window's properties, methods, and containership; the second name, displayWindow, refers to the 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. When you open a window, you can specify attributes such as the window's height and width and whether the window contains a toolbar, location field, or scrollbars. The following statement creates a window without a toolbar but with scrollbars:
msgWindow=window.openFor details on these window attributes, see the reference topic for the open (window object) method.
("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.
Each of the following statements closes the current window:
window.close()
The following statement closes a window called msgWindow:
self.close()
// Do not use the following statement in an event handler
close()msgWindow.close()
<FRAMESET ROWS="90%,10%">The following diagram shows the hierarchy of the frames. All three frames have the same parent, even though two of the frames are defined within a separate frameset. This is because a frame's parent is its parent window, and a frame, not a frameset, defines a window.
<FRAMESET COLS="30%,70%">
<FRAME SRC=category.html NAME="listFrame">
<FRAME SRC=titles.html NAME="contentFrame">
</FRAMESET>
<FRAME SRC=navigate.html NAME="navigateFrame">
</FRAMESET>
<FRAMESET ROWS="90%,10%">The file
<FRAME SRC=muskel3.html NAME="upperFrame">
<FRAME SRC=navigate.html NAME="navigateFrame">
</FRAMESET>
muskel3.html
contains the skeleton for the upper frames and defines the following frameset:
<FRAMESET COLS="30%,70%">The following diagram shows the hierarchy of the frames. upperFrame and navigateFrame share a parent: the top window. listFrame and contentFrame share a parent: upperFrame.
<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.
For example, suppose you are using the frameset described in Example 2 in the previous section. If you want users to be able to close the frame containing the alphabetical or categorical list of artists (in the frame listFrame) and view only the music titles sorted by musician (currently in the frame contentFrame), you could add the following button to navigateFrame:
<INPUT TYPE="button" VALUE="Titles Only"
When a user clicks this button, the file
onClick="top.frames[0].location='artists.html'">artists.html
is loaded into the frame upperFrame; the frames listFrame and contentFrame close and no longer exist.
Referring to and navigating among frames
Because frames are a type of window, you refer to frames and navigate among them as you do windows. See "Referring to windows and frames" and "Navigating among windows and frames".
Creating and updating frames: an example
If you designed the frameset in the previous section to present the available titles for a music club, the frames and their HTML files could have the following content:
category.html
, in the frame listFrame, contains a list of musicians sorted by category.
titles.html
, in the frame contentFrame, contains an alphabetical list of musicians and the titles available for each.
navigate.html
, in the frame navigateFrame, contains hypertext links the user can click to choose how the musicians are displayed in listFrame: alphabetically or by category. This file also defines a hypertext link users can click to display a description of each musician.
alphabet.html
, contains a list of musicians sorted alphabetically. This file is displayed in listFrame when the user clicks the link for an alphabetical list.
category.html
(the categorical list) contains code similar to the following:
<B>Music Club Artists</B>The file
<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>
...
alphabet.html
(the alphabetical list) contains code similar to the following:
<B>Music Club Artists</B>The file
<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>
...
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>The file
   
<A HREF=category.html TARGET="listFrame"><B>By category</B></A>
   
<A HREF="artists.html" TARGET="_parent">
<B>Musician Descriptions</B></A>
titles.html
(the main file, displayed in the frame on the right) contains code similar to the following:
<!----------------------------------------------------------------->For details on the syntax for creating a frame, see the reference topic for the Frame object.
<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
...
window.close()
or self.close()
.
parent.frame2.document.bgColor="teal"
changes the background color of the frame named frame2 to teal; frame2 is a frame in the current frameset.
msgWindow.close()
closes a window called msgWindow.
close()
closes the current window. However, when you open or close a window within an event handler, you must specify window.open()
or window.close()
instead of simply using open()
or close()
. Because of the scoping of static objects in JavaScript, a call to close()
without specifying an object name is equivalent to document.close()
.
Example 1: refer to the current window. The following statement refers to a form named musicForm in the current window. The statement displays an alert if a checkbox is checked.
if (document.musicForm.checkbox1.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 checkboxWin, the current window remains active: checking the checkbox and selecting the selection option do not give focus to the window.
alert('The checkbox on the musicForm is checked!')}// Determine if a checkbox is checked
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.
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=1window2.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.
Example 1: second window. The following example creates a hypertext link to a second window. The example has a button that opens an empty window named window2, then a link that loads the file doc2.html
into the newly opened window, and then a button that closes the window.
<P>
Example 2: anchor in a second window. The following example creates a hypertext link to an anchor in a second window. The link displays the anchor named numbers in the file
<INPUT TYPE="button" VALUE="Open window2"
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 window2"
onClick="msgWindow.close()">doc2.html
in the window window2. If window2 does not exist, it is created.
<A HREF=doc2.html#numbers TARGET="window2">Numbers</A>
Example 3: frame name. The following example creates a hypertext link to an anchor in a frame. The link displays the anchor named abs_method in the file sesame.html
in the frame named contentFrame. The frame must be within the current frameset, and the frame name must be defined in the NAME attribute of a FRAME tag.
<A HREF=sesame.html#abs_method TARGET="contentFrame">abs</A>
Example 4: literal frame name. The following example creates a hypertext link to a file. The link displays the file named artists.html
in the parent window of the current frameset. This Link object appears in a frame within a frameset, and when the user clicks the link, all frames in the frameset disappear and the content of artists.html
is loaded into the parent window.
<A HREF="artists.html" TARGET="_parent">
<B>Musician Descriptions</B></A>
You navigate among frames the same way as you navigate among windows.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. You can give focus to a window programmatically by giving focus to an object in the window or by specifying the window as the target of a hypertext link. Although you can change an object's values in a second window, that does not make the second window active: the current window remains active. Example 1: give focus to an object in another window. The following statement gives focus to a Text object named city in a window named checkboxWin. Because the Text object is gaining focus, the window also gains focus and becomes active. The example also shows the statement that creates checkboxWin.
checkboxWin=window.open("doc2.html")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.
...
checkboxWin.document.musicForm.city.focus()
<A HREF="doc2.html" TARGET="window2"> Load a file into window2</A>