Javascript learning casual (using Windows and frame) Skills

JavaScript allows you to create and open windows that represent HTML text, form objects, and frames. the window object is the top-level object of the JavaScript client hierarchy. The form element and all JavaScript code exist in the document, and the document is loaded into the window. to understand how Windows work, you can control these windows.

Open and Close windows
When the user starts the (launch) Navigator, a window is automatically created. you can also use the New Web Browser on the File menu of Navigator to open a window. You can Close a window using the Close or Exit of the File menu of Navigator. you can also use a program to open or close a window.

Open Window
Create a window named msgwindowand display the content of the file sesame.html in the window.

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

The following statement creates a window named homeWindow to display the home page of Netscape.

HomeWindow = window. open ("http://www.netscape.com ")

The window can have two names. the following statement creates a window with two names. The first one is msgWindow, which is used to reference the properties, methods, and inclusion relationships of the window, the second name displayWindow is used to reference a window as an object submitted by form or hypertext chain.

When creating a window, the window name is not required. however, if you want to reference this window from another window, this window must have a name. for more information about window names, see windows and frames.

When opening a window, you can specify window properties, such as the window height, width, tool bar, location field, or scroll bar. The following statement creates a window with no toolbar but a scroll bar.

MsgWindow = window. open
("Sesame.html", "displayWindow", "toolbar = no, scrollbars = yes ")

For details about window properties, see OPEN method.

Close Window
You can close a window by using the close method in the program. You cannot close only one frame but not the entire parent window.

The following statement can close the current window:

Window. close ()
Self. close ()
// This statement cannot be used in event handlers.
Close ()

The following statement closes a window named msgWindow:

MsgWindow. close ()

--------------------------------------------------------------------------------

Use frame
A frame is a special window that displays multiple independent scrolling frames in one window. each frame has a different URL. each frame can point to a different URL or be used as another URL destination, but it must be in the same window. A series of frames form pages ).

Is a window containing three frames

This frame is
Named listFrame named contentFrame

|
----------------- V --------------------------------- v ------------
| Music Club | Toshiko Akiyoshi |
| Artists | Interlude |

| Jazz | The Beatles |
|-T. Akiyoshi | Please 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
You can create a frame by using the <frameSET> tag in the HTML document. the unique role of the <frameSET> tag in the HTML document is to define the layout of each frame on the page ).

Example 1 the language name defines a set of frames as shown in

<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 encryption navigate.html NAME = "navigateFrame">
</FRAMESET>

Given the hierarchy of these frames, although two frames are defined in another frameset, the three frames have the same parent, this is because the father of frame is its parent window, and the window is determined by frame rather than frameset.

Top

+ -- ListFrame (category.html)

Certificate --contentframe(titles.html)

+--NavigateFrame(navigate.html)
You can also reference the above frame in the array frames (for information about the array frames, see the frame object ):
Listframe is represented by top. frame [0 ].
Contentframe is represented by top. frame [1 ].
Navigateframe is represented by top. frame [2 ].
For example 2, you can use another method to create the above window: The first two frames and navigateFrame have different parent nodes. The top-layer frameset is 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 frame skeleton 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>

It shows the hierarchies of these frames. upperFrame and navigateFrame share a parent: the top window. While listFrame and contentFrame share a parent: upperFrame.

Top

| + -- ListFrame
| (Category.html)
+ --- UpperFrame ----------- |
| (Muske13.html) |
| + -- ContentFrame
| (Titles.html)

+ -- NavigateFrame
(Navigate.html)
You can use the following method to reference these frames (for details about the frame array, refer to the frame object ).
UpperFrame is represented by top. frame [0 ].
NavigateFrame is represented by top. frame [1 ].
ListFrame is represented by upperFrame. frames [0] or top. frames [0]. frames [0 ].
ContentFrame is represented by upperFrame. frames [1] or top. frames [0]. frames [1 ].
Update frame (updating frames)
As long as you describe the frame hierarchy, you can use the location attribute to set the URL to update the frame content.

For example, if you want to disable a frame (named listframe) containing a list of painters in alphabetical or sorted order when using frameset in example 2 above ), you can add the following buttons to navigateFrame if you only want to see the title of a work sorted by the composer (in contentFrame.

<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 the frame named upperFrame, And the listFrame and contentFrame are closed and no longer exist.

Reference frame and browse between frames (navigate)
Because frame is a window, you can reference frame and browse between frames in a similar way.

Frame example
In the previous section, if frameset is designed as a title available for a music club, these frames and their HTML files include the following:

Category.html is located in listFrame and contains a list of composite sorted by category.
Titles.html is located in contentFrame and contains the name of each composer in a letter sequence and the title of the composer.
Navigate.html is located in navigateFrame and has a hypertext chain. This allows you to select how to display the composite in the listFrame: In alphabetical or categorical order. this file also defines a hypertext chain that allows you to display the introduction of each composer.
The additional file alphabet.html contains a letter-ordered composite. When you want to display a letter sequence table, click the chain and the file is displayed in listFrame.
Code contained in file category.html (sorted by category) is 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>
...

The Code contained in the file alphabet.html (in alphabetical order) is 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 Code contained in the navigate.html file (the navigation chain at the bottom of the screen) is similar to the following. note: The target of artists.html is "_ parent ". when you press this link, the entire window is overwritten because the top window is the parent of navigateFrame.

<A href1_alphabet.html TARGET = "listFrame"> <B> Alphabetical </B> </A>
& Nbsp
<A HREF=category.html TARGET = "listFrame"> <B> By category </B> </A>
& Nbsp
<A HREF=artists.html TARGET = "_ parent">
<B> Musician Descriptopns </B> </A>

The Code contained in the titles.html file (main file, displayed in the framework on the right) is roughly as follows:

<! ------------------------------------------------------------------>
<A name = "0001"> <H3> Toshiko Akiyoshi </H3> </A>
<P> Interlude
<! ------------------------------------------------------------------>
<A name = "0002" type = "codeph" text = "codeph"> <H3> The Beatles </H3 type = "codeph" text = "/codeph"> </A type = "codeph" text = "/codeph">
<P> Please Me
<! ------------------------------------------------------------------>
<A name = "0003"> <H3> Betty Carter </H3> </A>
<P> Ray Charles and Betty Carter
...

For details about the create frame syntax, see frame object.

--------------------------------------------------------------------------------

Reference window and frame
The name of the window to reference depends on whether you want to reference the properties, methods, and event handlers of the window, or use the window as an object for form submission or hypertext chain.

Because the window object is located at the top of the JavaScript client hierarchy, window is the basis for describing the inclusion relationship between objects in the window.

Reference window properties, methods, and event handlers
You can use either of the following methods to reference the properties, methods, and event handlers of the current window or other windows:

Self or window: self and window have the same meaning and both indicate the current window. You can select either of them to reference the current window. for example, call window. close () or self. close () to close the current window
Top or parent: both top and parent are used to replace the window name. top refers to the top-level Navigator window. parentrefers to the window containing frameset.for example, the sentence parent.frame2.doc ument. bgColor = "teal" sets the background color of the frame named frame2 to teal. frame2 is a frame of the current frameset.
Window variable name: the variable name specified when the window is opened. for example, msgWindow. close to close the window named msgWindow. however, to open or close a window in the event handler, you must use window. open () or window. close (), but not open () and close (). due to the scope of static objects in JavaScript, calling close without specifying the object name is equivalent to document. close ().
The window name is omitted because the current window is always assumed. When you call the window method and use its properties, You can omit the window name. For example, close () closes the current window.
For more information about window methods, see window object

Example 1 reference the current window. The following statement references the form named musicform in the current window. If the check box is checked, this statement displays a warning.

If (self.doc ument. musicForm. checkbox1.checked)
Alert ('the checkbox on The misicForm is checked ')

Example 2 reference other windows. the following statement references the form named musicform in the window checkboxWin. these statements verify whether the check box is checked. Execute the check box to check whether an option of the select object is selected and SELECT an option of the select object.

// Check whether the check box is checked
If (checkboxWin.doc ument. musicForm. checkbox2.checked ){
Alert ('the checkbox on The misicForm in checkboxWin is checked ')}

// Execute the check box
CheckboxWin.doc ument. musicForm. checkbox2.checked = true

// Determine whether an option of the select object is selected
If (checkboxWin.doc ument. musicForm. musicTypes. options [1]. selected)
Alert ('option 1 is selected! ')

// SELECT an option for the SELECT object
CheckboxWin.doc ument. musicForm. musicTypes. selectedIndex = 1

Example 3 Reference frame in another window. the following statement references the frame named frame2 in window window2. this statement changes the background color of frame2 to purple. The name of frame2 must be specified in the <FRAMESET> mark. <FRAMESET> can generate frameset.

Window2.frame2.doc ument. bgColor = "violet"

Reference a window in form submission or hypertext chain
When A window is used as an object submitted by form or hypertext chain (as the TARGET attribute of <FORM> or <A> tag), the window name must be used instead of the window variable. this window will be the chain loaded window, or for form, it will display the server response window.

Example 1 window 2. The example below creates a hypertext chain for the second window. In this example, a button is used to open a window named window2, and the doc2.html file is mounted to the latest window. In addition, the button is used to close the window.

<P>
<Input type = "button" VALUE = "Open window2"
OnClick = "msgWindow = window. open ('', 'resizable = no, width = 200, height = 100 ')"
<P>
<Input type = "button" VALUE = "Close window2"
OnClick = "msgWindow. close ()">

Example 2 anchor.in the second window, create a superchain for anchor.this chain is connected to anchor named number in doc2.html in window2.

<A HREF=doc2.html # numbers TARGET = "window2"> Numbers </A>

Example 3: frame NAME. The next example is the frame's anchorcreated A supercharacter chain. The link is contframedisplay file sesame.html named abs_method. This frame must be placed in the current frameset, and the frame NAME must be defined using the NAME attribute marked by <FRAMESET>.

<A hrefeclipsesame.html # abs_method TARGET = "contentFrame"> abs </A>

Example 4 name of a regular frame. in the following example, the contents of the file artists.html are displayed in the parent window of the current frameset. The link object appears in a frame of the frameset. When you press this link, all frames in the frameset disappear, artists. the ftml content is loaded into the parent window.

<A href = "artists.html" TARGET = "_ parent">
<B> Musician Descriptions </B> </A>

--------------------------------------------------------------------------------

Navigating among windows)
Multiple Navigator windows can be opened at the same time. you can press the window to focus the window to browse between these windows. you can focus on objects in a window by programming, or specify this window as the object of the Super Text chain. although you can change the object Value in the second window, the second window cannot be activated, and the current window is always active.

An activity window is a window with focus. Once the window has focus, the window is placed at the beginning and can be changed visually. for example, the title bar of the window can change the color. the visual effect varies with your platform.

Example 1 assign focus to an object in another window. the following statement assigns focus to the text object city in the window checkboxWin. Because the city gets the focus, checkboxWin gets the focus and becomes the activity window. this example also contains the statement for creating checkboxWin.

CheckboxWin = window. open ("doc2.html ")
...
CheckboxWin.doc ument. musicForm. city. focus ()

Example 2 Use hypertext chains to assign focus to another window. the following sentence specifies window2 as the object of the hypertext chain. When you press this link, the focus is converted to window2. if window2 does not exist, it is created.

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