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 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 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 学习提高路线分享
2011/10/23 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python Socket传输文件示例
2017/01/16 Python
python实现下载文件的三种方法
2017/02/09 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
python中time tzset()函数实例用法
2021/02/18 Python
求职自荐书范文
2013/12/04 职场文书
采购员的工作职责
2013/12/26 职场文书
财经学院自荐信范文
2014/02/02 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书