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

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

Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
easyui validatebox验证
Apr 29 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
js实现开启密码大写提示
Dec 21 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
vue界面发送表情的实现代码
Sep 11 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
You might like
php 空格,换行,跳格使用说明
2009/12/18 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
ext for eclipse插件安装方法
2008/04/27 Javascript
javascript 写类方式之八
2009/07/05 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
webpack之devtool详解
2018/02/10 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
python实现无边框进度条的实例代码
2020/12/30 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
中文专业自荐书
2014/06/29 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
js判断两个数组相等的5种方法
2022/05/06 Javascript