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


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

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

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



相关阅读:
XHTML+CSS兼容性解决方案小集
Asp.net 文件上传类(取得文件后缀名,保存文件,加入文字水印)
如何在 Microsoft Visual Studio 2005 中创建控制台应用程序
javascript实现鼠标选取拖动或Ctrl选取拖动
js 函数的副作用分析
asp.NET开发中正则表达式中BUG分析
多字段模糊搜索的函数
JS 日历控件(蓝色)
网页变灰配合全国哀悼日的css代码 20100421
Linux下创建自解压tar文件
JavaScript 实现 Konami Code
js 返回时间戳所对应的具体时间
二十行语句实现从Excel到mysql的转化
blockquote标记应用注意
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 如果把梦带向大海 小学五年级作文700字:我的发现 宝贵的光明 避暑摩诃池上作 住建委员会“三严三实”专题教育党课讲话稿 英语考试总结与反思 有关我的春节作文300字:这就是我的春节 人事部国家煤矿安全监察局关于做好从大中型煤矿企业专业技术人员中考试录用煤矿安全监察办事处国家公务员工 初中生三年级作文:写给妈妈的信 《汤姆索亚历险记》读后感作文 最新2013年两课教学部教学工作计划_教学工作计划 高中高三作文1000字:我看见了大海 我爱星期天作文400字 B股市场政策变迁与评价 寻找晶石的旅程(14)作文600字 初中初一作文750字:参观航天展 我想看见你 当我想起爱 2015年辽宁高考作文沙子与珍珠 海洋探密150字 入住公寓协议书 图文日志:冬天,在你们的记忆里,冬天什么样的呢? 作文 我的收获 雪天使(一)作文500字 写作文批语要追求真、善、美 值得跟孩子一起看的40部电影 一个闪光点,足矣 半夜睡不着 班主任的“五勤” 劳动和社会保障局某年四五普法工作实施情况总结 人生就像一桌菜 写给85后,写给自己 寒假中我最难忘的一件事 打雪仗中的快乐——雪作文400字 夜半孤思冷,挥笔写寂寞 我的同桌“阿衰” 青柿子 师德师风建设优秀个人推荐表 开心的故事会 读《“精彩极了”和“糟糕透了”》有感 崔心怡 描写云的作文200字 基建工程议标文件 第九章东征军三战甘草坪损兵过半小梁设伏全歼唐军二十万 《本命年的回想》教案 我的职责 当前法治文化建设现状调查报告 我在等你啊 孤街冷巷,我也有我的天堂 教师入党思想报告范文:老师的楷模 万三送老

Copyright © 2016 phpStudy |