JavaScript allows you to create and open windows that represent HTML text, form objects, and frame. The Window object is the topmost object in the JavaScript client hierarchy, and the form element and all JavaScript code exist in the document, and the document is loaded into the window. To understand how the window works, you can control the operation of these windows.
opening and closing Windows
When a user starts (launch) Navigator, a window is created automatically. Users can also open a window using the new Web browser on the navigator's File menu. You can close a window by closing or exit with the Navigator File menu. You can also use the program to open or close a window.
Open a window
Create a window with the method open. The following statement creates a window named Msgwindow, and displays the contents of the file sesame.html within that window.
Msgwindow=window.open ("sesame.html")
The following statement creates a window called Homewindow that displays Netscape's home page.
Homewindow=window.open ("http://www.netscape.com")
The window can have two names. The following statement creates a window with two names, the first name is Msgwindow for referencing a window's properties, methods and containing relationships, and the second name Displaywindow used to refer to a window as a form-submit or hypertext-chain object.
When creating a window, it is not required to give the window name. But if you're going to refer to this window from another window, this window must have a name. For information about using window names see Windows and frames for information.
When you open a window, you can specify window properties, such as the height of the window, width, whether it contains toolbars, location fields, or scroll bars, and so on. The following statement creates a window without a toolbar but with a scroll bar.
Msgwindow=window.open
("sesame.html", "Displaywindow", "Toolbar=no,scrollbars=yes")
For details about the properties of a window, see the Open method.
Close window
You can use method close in your program to shut down a window. Do not allow only one frame to be closed, not the entire parent window.
The following statements can close the current window:
Window.close ()
Self.close ()
This statement cannot be used in an event handler
Close ()
The following statement closes a window named Msgwindow:
Msgwindow.close ()
--------------------------------------------------------------------------------
Use frame
A frame is a special window that displays multiple independent scrolling frame in one window. Each frame has a different URL. Each frame can point to a different URL or as a destination for other URLs, but must be within the same window. A series of Frame components pages (page).
The following figure is a window containing three frame
This is the This frame is
Named Listframe named Contentframe
| |
-----------------v-----------------------------------v------------
| Music Club | Toshiko Akiyoshi |
| Artists | Interlude |
| Jazz | The Beatles |
| -T. Akiyoshi | Please do Me |
| _ J. Coltrame | |
| -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
Create a Frame
Use the <frameSET> tag in an HTML document to create a frame. The only function of the <frameSET> tag in an HTML document is to define the layout (layout) of each frame that makes up the page.
Example 1 defines a set of frame as shown in the above figure
<framesset ROWS = "90%,10%" >
<frameset cols= "30%,70%" >
<frame src=category.html name= "Listframe" >
alt= "Backward" height=32 width=32> <frame src=titles.html name= "contentframe>
alt= "Backward" height=32 width=32> </FRAMESET>
<frame SRC =navigate.html name= "Navigateframe" >
</FRAMESET>
The following figure gives the hierarchy of these frame, although two frame is defined in another frameset, but the three frame has the same father, because the father of the frame is its parent window, and the window is determined by the frame rather than the frameset.
Top
+--listframe (category.html)
+--contentframe (titles.html)
+--navigateframe (navigate.html)
You can also array frames references the above frame (information about the array frames See Frame object):
Listframe uses top.frame[0] to express
Contentframe uses top.frame[1] to express
Navigateframe uses top.frame[2] to express
Example 2 can create the above window in another way: the first two frame and navigateframe each have different parents, the top level of frameset defined as follows:
<framesset ROWS = "90%,10%" >
<frame src=muske13.htm name= "Upperframe" >
alt= "Backward" height=32 width=32> <frame src=navigate.html name= "navigateframe>
alt= "Backward" height=32 width=32> </FRAMESET>
The file muskel3.html contains the skeleton of the frame mentioned above and defines the following frameset.
<framesset COLS = "30%,70%" >
<frame src=categroy.html name= "Listframe" >
alt= "Backward" height=32 width=32> <frame src=titles.html name= "contentframe>
alt= "Backward" height=32 width=32> </FRAMESET>
The following figure illustrates the hierarchical relationships of these several frame Upperframe and Navigateframe share a parent: the topmost window. and Listframe and Contentframe share a father: Upperframe.
Top
| +--listframe
| | (category.html)
+---upperframe-----------|
| (muske13.html) |
| +--contentframe
| (titles.html)
+--navigateframe
(navigate.html)
You can refer to these frame in the following ways (see the Frame object for information about the frame array).
Upperframe uses top.frame[0] to express
Navigateframe uses top.frame[1] to express
Listframe with Upperframe.frames[0] or top.frames[0].frames[0]
Contentframe with upperframe.frames[1] or top.frames[0].frames[1]
Update frame (updating frames)
As long as you illustrate the frame hierarchy, you can use the Location property to set the URL to update the contents of the frame.
For example, when using the frameset in section 2 above, you want the user to be able to close the frame (named Listframe) of the artist list that contains alphabetical or categorical order, and just want to see the title of the work sorted by composer (in Contentframe), You can add the following buttons to the Navigateframe.
<input type= "button" value= "Titles only"
onclick= "top.frames[0].location= ' artists.html '" >
When the user presses this button, the file artist.html is loaded into a frame named Upperframe, and Listframe and Contentframe are closed and no longer exist.
Referencing frame and navigating between frame (navigate)
Because frame is a window, you can refer to the frame and navigate between the frame in a similar way as using a window.
Example of frame
In the previous section, if Frameset is designed as a title for a music club, these frame and its HTML files include the following:
Category.html is located in Listframe and has a list of composers sorted by category
Titles.html is located in Contentframe, with the names of the composers in alphabetical sequence and the title of the composer's work.
Navigate.html, located in Navigateframe, has a hypertext chain that allows the user to choose how to display the composer in Listframe: alphabetical or categorical. The file also defines a hypertext chain that allows users to display each composer's profile.
Attached file alphabet.html has an alphabetical composer, and when the user wants to display an alphabetical list, press the chain, which is displayed in the Listframe.
File category.html (sorted by category) 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" >jon 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 cater</a>
<li><a href=titles.html#0004 target= "Contentframe" >ray charles</a>
...
File alphabet.html (sorted alphabetically) 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 navigation chain at the bottom of the screen) contains code similar to the following. Note: The goal of artists.html is "_parent". When the user presses the chain, the entire window is rewritten because the topmost window is Navigateframe's parents.
<a href=alphabet.html target= "Listframe" ><B>Alphabetical</B></A>
<a href=category.html target= "Listframe" ><b>by category</b></a>
<a href=artists.html target= "_parent" >
<b>musician descriptopns</b></a>
The code included in the file titles.html (the main file, shown in the right frame) is roughly as follows:
<!------------------------------------------------------------------>
<a name= "0001" ><p>interlude
<!------------------------------------------------------------------>
<a name= "0002" ><p>please Please Me
<!------------------------------------------------------------------>
<a name= "0003" ><p>ray Charles and Betty Carter
...
See Frame object for details on creating frame syntax.
--------------------------------------------------------------------------------
referencing Windows and Frame
The name you use to refer to the window depends on whether you want to refer to the window's properties, methods, and event handlers, or whether you want to make Windows the object of the form submission or hypertext chain.
Because the Window object is at the top level of the JavaScript client hierarchy. Windows is the basis for the inclusion of relationships among objects within a window.
Referencing a window's properties, methods, and event handlers
You can refer to the properties, methods, and event handlers for the current window or other window in one of the following ways:
Self or window:self and window have the same meaning, all refer to the current window, which can be either selected to refer to the current window. For example, call Window.close () or self.close () to close the current window
Top or Parent:top and parent are used to override the name of the window. Top refers to the topmost navigator window, and parent refers to a window containing frameset. For example, the statement parent.frame2.document.bgcolor= "Teal" Place the background color of the frame named frame2 into Teal. Frame2 is a frame of the current frameset.
Window variable name: The window variable name is the variable specified when the window is opened. For example, Msgwindow.close closes a window named Msgwindow. However, if you want to open or close a window in an event handler, you must use either window.open () or window.close () instead of open () and closing (). Due to the scope problem of static objects in JavaScript, Calling close without specifying an object name is equivalent to Document.close ().
Omit the window name. Because you always assume the current window, you can omit the window name when you call the window's method and use its properties. such as close () closes the current window.
For information about window methods see Window objects
Example 1 refers to the current window. The following statement refers to the form named Musicform in the current window. If the check box is checked, the statement displays a warning.
if (self.document.musicForm.checkbox1.checked)
Alert (' checkbox on the misicform is checked ')
Example 2 refers to other windows. The following statement refers to the form named Musicform that is located in the window Checkboxwin. These statements realize whether the check box is checked, perform the check box, and determine whether an option for the Select object is selected, select An option for an object
Determine if the check box is checked
if (checkboxWin.document.musicForm.checkbox2.checked) {
Alert (' checkbox on the Misicform-Checkboxwin is checked ')}
Perform a check on the check box
Checkboxwin.document.musicform.checkbox2.checked=true
Determines whether an option for a Select object is selected
if (checkboxwin.document.musicform.musictypes.options[1].selected)
Alert (' Option 1 is selected! ')
Select an option for the Select object
Checkboxwin.document.musicform.musictypes.selectedindex=1
Example 3 refers to a frame in another window. The following statement refers to the frame named frame2 in the window window2. This statement changes the frame2 background color to purple, and the name frame2 must be indicated in the <FRAMESET> tag. <FRAMESET> can produce FRAMESET.
window2.frame2.document.bgcolor= "Violet"
Referencing a window in a form commit or hypertext chain
When you use a window as the object for a FORM commit or hypertext chain (as the target property for a <FORM> or <A> tag), you want to work with the window name instead of the window variable. This window will be the window that the chain is loaded into, or the window that displays the server response for form.
Example 1, window two. The following example creates a hypertext chain for the second window. In this example, there are: a button that opens a window named Window2, a link that loads the file doc2.html into the most recently opened window, and another button that closes the window.
<P>
<input type= "button" value= "Open window2"
onclick= "Msgwindow=window.open (', ' resizable=no,width=200,height=200 ')"
<P>
<input TYPE = "button" value= "Close Window2"
Onclick= "Msgwindow.close ()" >
Example 2 The anchor of the second window. In the second window, create a hypertext chain for anchor, which displays the file doc2.html named number anchor in the window Window2.
<a href=doc2.html#numbers target= "Window2" >Numbers</A>
Example 3 name of frame. The following example creates a hypertext chain for anchor in the frame. This chain is named Abs_method in the file sesame.html named Contframe. This frame must be placed in the current frameset, and the name of the frame should be in < The name attribute definition of the frameset> tag.
<a href=sesame.html#abs_method target= "Contentframe" >abs</A>
Example 4 the name of the constant frame. The following example creates a hypertext chain for a file. This chain displays the contents of the file artists.html in the parent window of the current frameset, which appears in a frame in frameset, and when the user presses the chain, All the frame in the frameset disappears and the contents of the artists.ftml are loaded into the parent window.
<a href= "artists.html" target= "_parent" >
<b>musician descriptions</b></a>
--------------------------------------------------------------------------------
Navigating between Windows (Navigating among Windows)
You can open many navigator windows at the same time. Users can click on the window and give this window focus to navigate between these windows. You can use the programming method to give focus to a Window object, or by specifying this window as a hypertext chain target. Although you can change the value of the object in the second window, the second window is not activated, and the current window is always active.
The active window is a window that has focus, and once the window has focused, the window is placed at the front and can be visibly changed. For example, the title bar of this window can change color. Visual effects vary depending on the platform you are using.
Example 1 assigns focus to an object in another window. The following statement can assign focus to the text object in the window Checkboxwin because City gets the focus, Checkboxwin also got focus and became the active window. This example also includes statements that create Checkboxwin.
Checkboxwin=window.open ("doc2.html")
...
CheckboxWin.document.musicForm.city.focus ()
Example 2 assigns focus to another window using a hypertext chain. The following sentence specifies Window2 as the target of the hypertext chain, and when the user presses the chain, focus is converted to Window2, and if Window2 does not exist, it is created.
<a href= "doc2.html" target= "Window2" > Load A file into window2</a>
