Using windows and frames

JavaScript lets you create and open windows for presenting HTML text, form objects, and frames. The window object is the top-level object in the JavaScript client hierarchy. Form elements and all JavaScript code exists in documents that are loaded into windows. By understanding how windows work, you can control and manipulate these windows.

• Opening and closing windows
• Using frames
• Referring to windows and frames
• Navigating among windows

Opening and closing windows

A window is created automatically when a user launches Navigator, and a user can open a window by choosing New Web Browser from the Navigator’s File menu. A user can close a window by choosing either Close or Exit from the Navigator’s File menu. You can also open and close windows programmatically.

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://www.netscape.com»)

Windows can have two names. The following statement creates a window with two names. The first name, «msgWindow», is used when referring to the window’s properties, methods, and containership; the second name, «displayWindow», is used when referring to the window as the target of a form submit or hypertext link. msgWindow=window.open(«sesame.html»,»displayWindow»)

When you create a window, a window name is not required. But if you want to refer to a window from another window, the window must have a name. For more information on using window names, see Referring to windows and frames.

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.open («sesame.html»,»displayWindow»,»toolbar=no,scrollbars=yes»)

For details on these window attributes, see the open method.

Closing a window

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

All of the following statements close the current window: window.close() self.close() // Do not use the following statement in an event handler close()

The following statement closes a window called msgWindow : msgWindow.close()

Using frames

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

The following diagram shows a window containing three frames: This frame is This frame is named listFrame named contentFrame | | | | ————-v——————————v———- | Music Club | Toshiko Akiyoshi | | Artists | Interlude | | | | | Jazz | The Beatles | | — T. Akiyoshi | Please Please Me | | — J. Coltrane | | | — M. Davis | Betty Carter | | — D. Gordon | Ray Charles and Betty Carter | | | | | Soul | Jimmy Cliff | | — B. Carter | The Harder They Come | | — R. Charles | | | . | . | ——————————————————- | Alphabetical By category Musician Descriptions | —————-^————————————— | | This frame is named navigateFrame

Creating a frame

You create a frame by using the &LTFRAMESET&GT tag in an HTML document. The &LTFRAMESET&GT tag is used in an HTML document whose sole purpose is to define the layout of frames that make up a page.

Example 1. The following statement creates the frameset shown in the previous diagram.

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. top | +—listFrame (category.html) | +—contentFrame (titles.html) | +—navigateFrame (navigate.html)

You can refer to the previous frames using the frames array as follows. (For information on the frames array, see the frame object.)

• listFrame is top.frames[0]
• contentFrame is top.frames[1]
• navigateFrame is top.frames[2]

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

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

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 . top | | +—listFrame | | (category.html) +—upperFrame——| | (muskel3.html) | | +—contentFrame | (titles.html) | +—navigateFrame (navigate.html)

You can refer to the previous frames using the frames array as follows. (For information on the frames array, see the frame object.)

• upperFrame is top.frames[0]
• navigateFrame is top.frames[1]
• listFrame is upperFrame.frames[0] or top.frames[0].frames[0]
• contentFrame is upperFrame.frames[1] or top.frames[0].frames[1]

Updating frames

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 alphabetic 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 .

If you want users to be able to close the frame containing the alphabetic 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 .

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

Because a frame is a type of window, you refer to frames and navigate among frames the same as you do with a window. See Referring to windows and frames and Navigating among windows.

Frame example

If the frameset in the previous section is designed 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 each musician and the titles available for that musician.
• navigate.html , in the frame navigateFrame , contains hypertext links that let the user choose how the musicians are displayed in listFrame : in an alphabetical list or a categorical list. This file also defines a hypertext link that lets the user display a description of each musician.
• An additional file, 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.

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

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

Toshiko Akiyoshi

The Beatles

Betty Carter

Ray Charles .

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 . Alphabetical &nbsp&nbsp&nbsp By category &nbsp&nbsp&nbsp Musician Descriptions

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

Toshiko Akiyoshi

The Beatles

Please Please Me

Betty Carter

Ray Charles and Betty Carter .

For details on the syntax for creating a frame, see the frame object.

Referring to windows and frames

The name you use to refer to a window depends on whether you are referring to a window’s properties, methods, and event handlers or are referring to the window as the target of a form submit or hypertext link.

Since the window object is the top-level object in the JavaScript client hierarchy, the window is essential for specifying the containership of objects in any window.

Referring to a window’s properties, methods, and event handlers

You can refer to the properties, methods, and event handlers of the current window or another window (if the other window is named) in any of the following ways:

• self or window. self and window are synonyms for the current window, and you can optionally use them to refer to the current window. For example, you can close the current window by calling either window.close() or self.close() .
• top or parent. top and parent are also synonyms that can be used in place of the window name. top refers to the top-most Navigator window, and parent refers to a window containing a frameset. For example, the statement parent.frame2.document.bgColor=»teal» changes the background color of the frame named frame2 to teal; frame2 is a frame in the current frameset.
• The name of a window variable. The window variable is the variable that is specified when a window is opened. For example, msgWindow.close() closes a window called msgWindow . 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() . Due to the scoping of static objects in JavaScript, a call to close() without specifying an object name is equivalent to document.close() .
• Omit the window name. Because the existence of the current window is assumed, you do not have to reference the name of the window when you call its methods and assign its properties. For example, close() closes the current window.

For more information on these methods of referring to windows, see the window object.

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 (self.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. // 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) // 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 &LTFRAMESET&GT tag that creates the frameset. window2.frame2.document.bgColor=»violet»

Referring to a window in a form submit or hypertext link

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 &LTFORM&GT or &LTA&GT tag). The window you specify is the window that the link is loaded into or, for a form, the window that server responses are displayed in.

Example 1: second window. The following example creates a hypertext link to a second window. The example has a button that opens a window named window2 , then a link that loads the file doc2.html into the newly opened window, then a button that closes the window.

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 doc2.html in the window window2 . If window2 does not exist, it is created. Numbers

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 &LTFRAME&GT tag. abs

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. Musician Descriptions

Navigating among windows

Many Navigator windows can be open at the same time. The user can move among these windows by clicking them to give them focus. 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.

The active window is the window that has focus. When a window has focus, it is brought to the front and changes in some visual way. For example, the window’s title bar might change to a different color. The visual cue varies depending on the platform you are using.

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, checkboxWin also gains focus and becomes the active window. The example also shows the statement that creates checkboxWin . 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. Load a file into window2

Читайте также:  Nvidia gt 1030 driver windows 10