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

时间:2021-05-26

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

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

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

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

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

homeWindow=window.open("http://e|
|_R.Charles||
|...|...|
------------------------------------------------------------------
|AlphabeticalBycategoryMusicianDescriptions|
-----------------^------------------------------------------------

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

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

<FRAMESSETROWS="90%,10%">
 <FRAMESETCOLS="30%,70%">
   <FRAMESRC=category.htmlNAME="listFrame">
ALT="BACKWARD"HEIGHT=32WIDTH=32>   <FRAMESRC=titles.htmlNAME="contentFrame>
ALT="BACKWARD"HEIGHT=32WIDTH=32> </FRAMESET>
 <FRAMESRC=navigate.htmlNAME="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定义如下:

<FRAMESSETROWS="90%,10%">
  <FRAMESRC=muske13.htmNAME="upperFrame">
ALT="BACKWARD"HEIGHT=32WIDTH=32>  <FRAMESRC=navigate.htmlNAME="navigateFrame>
ALT="BACKWARD"HEIGHT=32WIDTH=32></FRAMESET>

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

<FRAMESSETCOLS="30%,70%">
  <FRAMESRC=categroy.htmlNAME="listFrame">
ALT="BACKWARD"HEIGHT=32WIDTH=32>  <FRAMESRC=titles.htmlNAME="contentFrame>
ALT="BACKWARD"HEIGHT=32WIDTH=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(updatingframes)
只要你说明了frame层次结构,你可以用location属性来设置URL,以更新frame的内容.

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

<INPUTTYPE="button"VALUE="TitlesOnly"
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>MusicClubArtists</B>
<P><B>Jazz</B>
<LI><AHREF=titles.html#0001TARGET="contentFrame">ToshikoAkiyoshi</A>
<LI><AHREF=titles.html#0006TARGET="contentFrame">JonColtrane</A>
<LI><AHREF=titles.html#0007TARGET="contentFrame">MilesDavis</A>
<LI><AHREF=titles.html#0010TARGET="contentFrame">DexterGordon</A>

<P><B>Soul</B>
<LI><AHREF=titles.html#0003TARGET="contentFrame">BettyCater</A>
<LI><AHREF=titles.html#0004TARGET="contentFrame">RayCharles</A>
...

文件alphabet.html(按字母排序)包含的代码类似于下述:

<B>MusicClubArtists</B>
<LI><AHREF=titles.html#0001TARGET="contentFrame">ToshikoAkiyoshi</A>
<LI><AHREF=titles.html#0002TARGET="contentFrame">TheBeatles</A>
<LI><AHREF=titles.html#0003TARGET="contentFrame">BettyCarter</A>
<LI><AHREF=titles.html#0004TARGET="contentFrame">RayCharles</A>
......

文件navigate.html(在屏幕底部的导航链)包含的代码类似下面.注意:artists.html的目标是"_parent".当用户按动此链时,整个窗口被重写,因为最上层窗口是navigateFrame的父辈.

<AHREF=alphabet.htmlTARGET="listFrame"><B>Alphabetical</B></A>
&nbsp&nbsp&nbsp
<AHREF=category.htmlTARGET="listFrame"><B>Bycategory</B></A>
&nbsp&nbsp&nbsp
<AHREF=artists.htmlTARGET="_parent">
<B>MusicianDescriptopns</B></A>

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

<!------------------------------------------------------------------>
<ANAME="0001"><H3>ToshikoAkiyoshi</H3></A>
<P>Interlude
<!------------------------------------------------------------------>
<ANAME="0002"><H3>TheBeatles</H3></A>
<P>PleasePleaseMe
<!------------------------------------------------------------------>
<ANAME="0003"><H3>BettyCarter</H3></A>
<P>RayCharlesandBettyCarter
...

有关创建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('ThecheckboxonthemisicFormischecked')

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

//判断是否核对框被核对
if(checkboxWin.document.musicForm.checkbox2.checked){
  alert('ThecheckboxonthemisicFormincheckboxWinischecked')}

//执行核对该核对框
checkboxWin.document.musicForm.checkbox2.checked=true

//判断是否select对象的一个选项被选中
if(checkboxWin.document.musicForm.musicTypes.options[1].selected)
alert('Option1isselected!')

//选择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>
<INPUTTYPE="button"VALUE="Openwindow2"
onClick="msgWindow=window.open('','resizable=no,width=200,height=200')"
<P>
<INPUTTYPE="button"VALUE="Closewindow2"
onClick="msgWindow.close()">

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

<AHREF=doc2.html#numbersTARGET="window2">Numbers</A>

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

<AHREF=sesame.html#abs_methodTARGET="contentFrame">abs</A>

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

<AHREF="artists.html"TARGET="_parent">
<B>MusicianDescriptions</B></A>



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



在窗口之间浏览(Navigatingamongwindows)
可以同时打开很多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不存在,则被创建.

<AHREF="doc2.html"TARGET="window2">Loadafileintowindow2</A>

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章