Tips for learning javascript essays (using window and frame)_javascript tips

JavaScript allows the creation and opening of windows that represent HTML text, form objects, and frames. The window object is the top-level object in the JavaScript client hierarchy. The form element and all JavaScript code are present in the document, and the document is loaded into the window. To understand You can control how windows work.

Open and close windows
When the user launches Navigator, a window will be automatically created. Users can also use Navigator New Web Browser on the File menu opens a window, and you can use Close or Exit on the Navigator's File menu to close a window. You can also use a program to open or close a window.

Open a window
Create a window using the open method. The following statement creates a window named msgWindow and displays the contents of the file sesame.html in the window.

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

The following statement can create a window named homeWindow for displaying Netscape's home page.

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

A window can have two names. The following statement creates a window with two names. The first name is msgWindow, which is used to reference the properties, methods and inclusion relationships of the window. The second name, displayWindow, is used when referencing the window as a form submission or hypertext link object.

When creating a window, it is not required to give a window name. But if you plan to use it from another window To reference this window, this window must have a name. For information about using window names, see the relevant information on windows and frames.

When opening a window, you can specify the window properties, such as the height and width of the window, and whether it contains tools. bar, location field or scroll bar, etc. The following statement creates a window without toolbar but with scroll bar.

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

For details about the properties of the window, please see the OPEN method.

Close the window
You can use the method close in the program to close a Window. It is not allowed to close only one frame without closing the entire parent window.

The following statements 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
frame是一种特殊的窗口,它可以在一个窗口显示多个独立滚动的frame.每个frame又有各自不同的URL. 各frame可以指向不同的URL,也可以作为其它URL目标,但必须在同一个窗口内. 一系列的frame 组成页(page).

下图是一个含有三个frame的窗口

            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. 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
创建一个frame
在HTML文档中使用

标记就可以创建一个frame. 标记在HTML文档中的唯一作用就是定义组成页的各个frame的布局(layout).

例1 下述语名定义了上图所示的一组frame


　
　　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　
　 


下图给出了这些frame的层次结构,虽然有两个frame是在另一个frameset中定义的,但这三个frame有同一个父亲, 这是因为frame的父亲是它的父窗口,而窗口是由frame而不是frameset确定的.

top

+--listFrame (category.html)

+--contentFrame(titles.html)

+--navigateFrame(navigate.html)
你也可以数组frames引用上述的frame(有关数组frames的信息参见frame对象):
listframe 用 top.frame[0]表示 
contentframe 用 top.frame[1]表示 
navigateframe 用 top.frame[2]表示 
例2 可以用另一个办法创建上述窗口: 最前面的两个frame与navigateFrame各有不同的父辈,顶层的frameset定义如下:


　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 

文件muskel3.html包含了上述frame的骨架,并定义了下述frameset.


　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　　
ALT="BACKWARD" HEIGHT=32 WIDTH=32>  

下图说明了这几个frame的层次关系upperFrame和navigateFrame共享一个父辈:最顶的window. 而listFrame和contentFrame共享一个父辈:upperFrame.

top

|                        +--listFrame
|                        | (category.html)
+---upperFrame-----------|
|  (muske13.html)        |
|                        +--contentFrame
|                           (titles.html)

+--navigateFrame
(navigate.html)
可以用下面的办法引用这些frame(关于frame数组的信息参见frame对象).
upperFrame 用 top.frame[0]表示 
navigateFrame 用 top.frame[1]表示 
listFrame 用 upperFrame.frames[0] 或top.frames[0].frames[0]表示 
contentFrame 用upperFrame.frames[1] 或top.frames[0].frames[1]表示 
更新frame(updating frames)
只要你说明了frame层次结构,你可以用location属性来设置URL, 以更新frame的内容. 

例如,在使用上节例2中frameset时,若希望用户能够关闭含有字母序或分类序的画家列表的frame(名为listframe),且只想看到按作曲家排序的作品标题(在contentFrame中), 则可以向navigateFrame 中加入如下按钮.

onClick="top.frames[0].location='artists.html'">

当用户按动此按钮时,文件artist.html被加载到名为upperFrame的frame中,而listFrame和contentFrame被关闭,且不再存在.

引用frame和在frame之间浏览(navigate)
因为frame是一种窗口,所以你可以与使用窗口类似的办法引用frame和在frame 之间浏览.

frame的例子
在上一节中, 若frameset被设计为一个音乐俱乐部的可用的标题,则这些frame及其HTML文件包括下述的内容:

category.html 位于listFrame中, 放有按分类排序的作曲家列表 
titles.html 位于contentFrame中, 放有按字母序列里各作曲家姓名及该作曲家的作品标题. 
navigate.html 位于navigateFrame中, 放有超文本链, 使用户选择怎样在listFrame中显示作曲家:以字母序或分类序.这个文件还定义了一个超文本链, 使用户可以显示每个作曲家的简介. 
附加文件alphabet.html 放有按字母排序的作曲家,当用户想显示字母序列表时,按动此链,这个文件中就显示在listFrame中. 
The file category.html (sorted by category) contains code similar to the following:

Music Club Artists

Jazz

Toshiko Akiyoshi

Jon Coltrane

Miles Davis

Dexter Gordon

Soul

Betty Cater

Ray Charles
.. . The

file alphabet.html (sorted alphabetically) contains code similar to the following:

Music Club Artists

Toshiko Akiyoshi

The Beatles

Betty Carter

Ray Charles
.. .... The

file navigate.html (the navigation link at the bottom of the screen) contains code similar to the following. Note: The target of artists.html is "_parent". When the user clicks this link, the entire window Rewritten because the top window is the parent of navigateFrame.

Alphabetical
   
By category
   

Musician Descriptopns

The file titles.html (the main file, shown in the frame on the right) included The code is roughly as follows:

Toshiko Akiyoshi

Interlude

The Beatles

Please Please Me

Betty Carter

Ray Charles and Betty Carter
...

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



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



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

Because the window object is located at the top level of the JavaScript client hierarchy. Window is a description of the included relationship between objects in the window. Basics.

Reference the properties, methods and event handlers of the window
You can use one 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, they both refer to the current window. You can choose either one to refer to 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 name of the window. top refers to the top Navigator window, and parent refers to the window containing the frameset. For example, the statement parent.frame2.document.bgColor="teal" changes the name of the frame named frame2 Set the background color to teal. frame2 is a frame of the current frameset.
The name of the window variable: The window variable name is the variable specified when the window is opened. For example, msgWindow.close closes the window named msgWindow. But if you want to use the event To open or close a window in the handler, you must use window.open() or window.close(), but not open() and close(). Due to the scope problem of static objects in JavaScript, close is called without specifying The object name is equivalent to document.close().
Omit the window name. Because the current window is always assumed, the window name can be omitted when calling the window's methods and using its properties. For example, close() closes the current window.
For information about window methods, see the window object

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

if (self.document.musicForm.checkbox1.checked)
alert('The checkbox on the misicForm is checked')

Example 2 refers to other windows. The following statement quotes A form named musicform located in the window checkboxWin is created. These statements determine whether the check box is checked, execute the check box, determine whether an option of the select object is selected, and select an option of the SELECT object

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

//Execute checking of the checkbox
checkboxWin.document.musicForm.checkbox2.checked=true

//Determine whether an option of the select object is selected
if (checkboxWin .document.musicForm.musicTypes.options[1].selected)
alert('Option 1 is selected!')

//Select an option of the SELECT object
checkboxWin.document.musicForm. musicTypes.selectedIndex=1

Example 3 refers to a frame in another window. The following statement refers to a frame named frame2 in window window2. This statement changes the background color of frame2 to purple, and the name frame2 Must be specified in the

tag. can generate a frameset.

window2.frame2.document.bgColor="violet"

Reference one in form submission or hypertext link Window
When using a window as the object of a form submission or hypertext link (as the TARGET attribute of a

or tag), use the window name, not the window variable. The window will be the link The window that is loaded, or for a form, is the window that displays the server response.

Example 1 Second window. The following example creates a hypertext link for the second window. In this example, there are : A button, this button window can open a window named window2; a link, load the file doc2.html into the latest opened window; another button, this button closes the window.

onClick="msgWindow=window.open('','resizable=no,width=200,height=200')"

onClick="msgWindow.close()">

Example 2 anchor of the second window. Give anchor in the second window Create a hypertext link that displays the anchor named number of the file doc2.html in window window2.

Numbers

The name of the frame in Example 3. Next For example, a hypertext link is created for the anchor within the frame. This link is displayed in the file sesame.html named abs_method in the contFrame. This frame must be placed in the current frameset, and the name of the frame must be marked with

NAME attribute definition.

abs

Example 4 The name of a regular frame. The following example creates a hypertext link for the file. This link contains the content of the file artists.html Displayed in the parent window of the current frameset, this link object appears in a frame of the frameset. When the user clicks this link, all frames in the frameset disappear and the contents of artists.ftml are loaded into Within the parent window.


Musician Descriptions



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



Navigating among windows (Navigating among windows)
You can open many Navigator windows at the same time . The user can click on the window to give focus to this window to browse between these windows. You can programmatically give focus to an object in a window, or by specifying this window as the target of a hypertext link. Although You can change the value of the object in the second window, but you cannot activate the second window. The current window is always active.

The active window is the window with focus. Once the window has focus, this window is placed On top, can be changed visibly. For example, the title bar of this window can change color. The visual effect changes depending on the platform you are using.

Example 1 Assign focus to an object in another window .The following statement can assign focus to the text object city in the window checkboxWin. Because city gets focus, checkboxWin also gets focus and becomes the active window. This example also includes the statement to create checkboxWin.

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

Example 2 Use a hypertext link to assign focus to another A window. The following sentence specifies window2 as the target of the hypertext link. When the user clicks this link, the focus switches to window2. If window2 does not exist, it is created.

Load a file into window2