编程 Javascript

javascript学习随笔(使用window和frame)的技巧

Posted in Javascript onMarch 08, 2007

JavaScript允许创建和打开代表HTML文本, form对象和frame的窗口. window对象是JavaScript客户层次结构的最顶层对象, form元素和全部JavaScript代码都是存在于文档中,而文档被装载进窗口. 为了理解窗口怎样工作,你可以控制操作这些窗口.

打开和关闭窗口
当用户启动(launch)Navigator时,将自动创建一个窗口.用户还可以使用Navigator的File菜单上的New Web Browser打开一个窗口, 可以用Navigator的File菜单的Close或Exit关闭一个窗口.也可以用程序的办法来打开或关闭一个窗口.

打开窗口
用方法open创建一个窗口.下面语句创建了一个名为msgWindow的窗口,并在该窗口内显示文件sesame.html的内容.

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

下面的这个语句能够创建一个名为homeWindow的窗口,用于显示Netscape的home page.

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

|
This frame is named
navigateFrame
创建一个frame
在HTML文档中使用<frameSET>标记就可以创建一个frame. <frameSET>标记在HTML文档中的唯一作用就是定义组成页的各个frame的布局(layout).

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

　<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定义如下:

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

<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 中加入如下按钮.

当用户按动此按钮时,文件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>

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

<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作为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装入最新打开的窗口;另一个按钮,此按钮关闭窗口.

例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属性定义.

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

javascript学习随笔(使用window和frame)的技巧

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js验证表单第二部分

Nov 25 Javascript

js获取div高度的代码

Aug 09 Javascript

jQuery数据显示插件整合实现代码

Oct 24 Javascript

JavaScript实现鼠标点击后层展开效果的方法

May 13 Javascript

JavaScript中数组继承的简单示例

Jul 29 Javascript

jquery实现红色竖向多级向右展开的导航菜单效果

Aug 31 Javascript

jQuery实现点击水纹波动动画

Apr 10 Javascript

Vue.js每天必学之数据双向绑定

Sep 05 Javascript

原生js实现倒计时--2018

Feb 21 Javascript

JS实现简易计算器

Feb 14 Javascript

Javascript ParentNode和ChildNode接口原理解析

Mar 16 Javascript

Selenium执行Javascript脚本参数及返回值过程详解

Apr 01 Javascript

关于使用runtimeStyle属性问题讨论文章

Mar 08 #Javascript

用js判断用户浏览器是否是XP SP2的IE6

Mar 08 #Javascript

在IE模态窗口中自由查看HTML源码的方法

Mar 08 #Javascript

encode脚本和normal脚本混用的问题与解决方法

Mar 08 #Javascript

IE7提供XMLHttpRequest对象为兼容

Mar 08 #Javascript

使用onbeforeunload属性后的副作用

Mar 08 #Javascript

HTML中不支持静态Expando的元素的问题

Mar 08 #Javascript