JavaScript窗口与Frame操作详解：创建、引用与导航

JavaScript窗口与Frame操作详解：创建、引用与导航

JavaScript提供了创建和管理代表HTML文本、form对象及frame窗口的方法。window对象处于JavaScript客户端对象层次结构的顶层，form元素和所有JavaScript代码均存在于文档中，而文档则被加载到窗口内。为了掌握窗口的运作机制，开发者需要能够控制这些窗口的操作。

打开和关闭窗口

当用户启动Navigator时，系统会自动创建一个窗口。用户还可以通过Navigator的File菜单中的New Web Browser选项打开新窗口，或使用File菜单的Close或Exit选项关闭窗口。此外，也可以通过程序代码的方式动态打开或关闭窗口。

使用open方法可以创建一个新的窗口。以下语句创建了一个名为msgWindow的窗口，并在该窗口中显示文件sesame.html的内容。

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

以下语句创建了一个名为homeWindow的窗口，用于显示Netscape的主页。

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

窗口可以拥有两个名称。以下语句创建了一个具有两个名称的窗口：第一个名称msgWindow用于引用窗口的属性、方法和包含关系；第二个名称displayWindow则用于将窗口作为form提交或超文本链接的目标进行引用。

创建窗口时，并非必须指定窗口名称。然而，如果计划从另一个窗口引用此窗口，则该窗口必须具有一个名称。有关使用窗口名称的详细信息，请参阅windows and frames相关资料。

打开窗口时，可以指定窗口的各种属性，如高度、宽度、是否包含工具栏、location域或滚动条等。以下语句创建了一个不包含工具栏但带有滚动条的窗口。

msgWindow=window.open

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

有关窗口属性的详细信息，请参阅OPEN方法文档。

关闭窗口

可以在程序中使用方法close来关闭一个窗口。需要注意的是，不允许仅关闭一个frame而不关闭其整个父窗口。

以下语句均可用于关闭当前窗口：

window.close()

self.close()

//此语句不能用在事件处理程序中

close()

以下语句关闭了一个名为msgWindow的窗口：

msgWindow.close()

使用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文档中使用<frameSet>标记即可创建frame。<frameSet>标记在HTML文档中的唯一作用是定义组成页面的各个frame的布局（layout）。

例1 以下语句定义了上图所示的一组frame。

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

下图展示了这些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定义如下：

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

文件muskel3.html包含了上述frame的骨架，并定义了以下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>

下图说明了这些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中加入如下按钮。

<INPUT TYPE="button" VALUE="Titles Only"

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中。

文件 category.html (按分类排序) 包含的代码类似于以下内容：

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

文件 alphabet.html (按字母排序) 包含的代码类似于以下内容：

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

文件 navigate.html (在屏幕底部的导航链) 包含的代码类似如下。注意：artists.html的目标是"_parent"。当用户点击此链接时，整个窗口将被重写，因为最上层窗口是navigateFrame的父级。

<A HREF=alphabet.html TARGET="listFrame"><B>Alphabetical</B></A>

&nbsp&nbsp&nbsp

<A HREF=category.html TARGET="listFrame"><B>By category</B></A>

&nbsp&nbsp&nbsp

<A HREF=artists.html TARGET="_parent">

<B>Musician Descriptopns</B></A>

文件titles.html (主文件，显示在右边的框架中) 包括的代码大致如下：

<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

有关创建frame语法的详细信息，请参阅frame对象文档。

引用window和frame

引用window和frame

使用哪个名称来引用窗口，取决于你是想引用窗口的属性、方法和事件处理程序，还是想把window作为form提交或超文本链接的目标。

因为window对象位于JavaScript客户端层次结构的最顶层，所以window是说明窗口内各对象间包含关系的基础。

引用窗口的属性、方法和事件处理程序

可以使用以下方法之一来引用当前窗口或其他窗口的属性、方法及事件处理程序：

self或window: self和window含义相同，均指当前窗口，可以任选其一引用当前窗口。例如，调用window.close()或self.close()来关闭当前窗口。

top或parent: top和parent均用来替代窗口的名称。top是指最上层的Navigator窗口，parent则是指包含frameset的窗口。例如，语句parent.frame2.document.bgColor="teal"将名为frame2的frame的背景颜色设置为teal，frame2是当前frameset的一个frame。

窗口变量的名字: 窗口变量名为打开窗口时指定的变量。例如，msgWindow.close关闭名为msgWindow的窗口。但是，若想在事件处理程序中打开或关闭一个窗口，必须使用window.open()或window.close()，而不能使用open()和close()。由于JavaScript中的静态对象作用域问题，调用close而不指定对象名等价于document.close()。

省略窗口名。因为总是假定当前窗口，调用窗口的方法和使用其属性时，可以省略窗口名。例如，close()关闭了当前窗口。

有关窗口方法的详细信息，请参阅window对象文档。

例1 引用当前窗口。以下语句引用了当前窗口内名为musicform的form。如果核对框被选中，则该语句显示一个警示。

if (self.document.musicForm.checkbox1.checked)

alert('The checkbox on the misicForm is checked')

例2 引用其它窗口。以下语句引用了位于窗口checkboxWin中名为musicform的form。这些语句实现了判断是否核对框被选中、执行选中该核对框、判断是否select对象的一个选项被选中、选择SELECT对象的一个选项。

//判断是否核对框被选中

if (checkboxWin.document.musicForm.checkbox2.checked) {

alert('The checkbox on the misicForm in checkboxWin is checked')}

//执行选中该核对框

checkboxWin.document.musicForm.checkbox2.checked=true

//判断是否select对象的一个选项被选中

if (checkboxWin.document.musicForm.musicTypes.options[1].selected)

alert('Option 1 is selected!')

//选择SELECT 对象的一个选项

checkboxWin.document.musicForm.musicTypes.selectedIndex=1

例3 引用另一个窗口中的frame。以下语句引用了窗口window2中名为frame2的frame。这条语句将frame2的背景颜色改为紫色，名称frame2必须是在<FRAMESET>标记中指明。<FRAMESET>能产生frameset。

window2.frame2.document.bgColor="violet"

在form提交或超文本链接中引用一个窗口

当把一个窗口用作form提交或超文本链接的目标时（作为<FORM>或<A>标记的TARGET属性），要使用窗口名，而不能用窗口变量。这个窗口将是链接被加载进的窗口，或者对于form来说，是显示服务器响应的窗口。

例1 第二窗口。以下例子为第二窗口创建了一个超文本链接。该例子包含：一个按钮，此按钮窗口能打开名为window2的窗口；一个链接，把文件doc2.html装入最新打开的窗口；另一个按钮，此按钮关闭窗口。

<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()">

例2 第二窗口的anchor。在第二窗口内给anchor创建一个超文本链接，该链接在窗口window2中显示文件doc2.html中名为number的anchor。

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

例3 frame的名称。下例为frame内的anchor创建了一个超文本链接。该链接在名为contFrame中显示文件sesame.html中名为abs_method。该frame必须放在当前frameset中，且frame的名字要用<FRAMESET>标记的NAME属性定义。

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

例4 常frame的名称。下例为文件创建了一个超文本链接。该链接把文件artists.html的内容显示在当前frameset的父窗口内，该链接对象(link object)出现在frameset的某个frame中。当用户点击此链接时，frameset中的所有frame都消失，artists.ftml的内容被装入到父窗口内。

<A HREF="artists.html" TARGET="_parent">

<B>Musician Descriptions</B></A>

在窗口之间浏览(Navigating among windows)

可以同时打开多个Navigator窗口。用户可以点击窗口，给此窗口focus，实现在这些窗口之间浏览。你可以用编程的方式把focus赋予一个窗口内的对象，或者通过指定此窗口作为超级文本链接目标的办法。尽管你能改变第二窗口内对象的值，但并不能激活第二窗口，当前窗口总是活动的。

活动窗口是拥有focus的窗口，一旦窗口拥有了focus，此窗口被放在最前面，能够可见地被改变。例如，此窗口的标题栏可以改变颜色。视觉效果随你所用的平台而有所变化。

例1 把focus赋给另一个窗口的对象。以下语句可以把focus赋给窗口checkboxWin内的文本对象city，因为city获得了focus，checkboxWin也就得到了focus而成了活动窗口。该例子还包括了创建checkboxWin的语句。

checkboxWin=window.open("doc2.html")

checkboxWin.document.musicForm.city.focus()

例2 利用超文本链接把focus赋给另一个窗口。以下句子指定window2作为超文本链接的目标，当用户点击此链接时，focus转换到window2，若window2不存在，则被创建。

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