第9章窗口与框架06436.ppt

《第9章窗口与框架06436.ppt》由会员分享，可在线阅读，更多相关《第9章窗口与框架06436.ppt（56页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第9章 窗口与框架窗口操作是JavaScript中一个很重要的操作。所谓窗口是指浏览器窗口，也是通常所说的Window对象。使用HTML中的FRAMESET元素可以在一个窗口中使用多个框架，框架是窗口的一个重要组成部分。在本章里将会介绍Window对象的方法、属性和事件。9.1 Window对象Window对象是一个全局对象、是所有对象的顶级对象，在JavaScript中有着举足轻重的作用。Window对象作为对象的一种，也有着自己的方法和属性。9.1.1 Window对象介绍Window对象代表的是打开的浏览器窗口。通过Window对象可以控制窗口的大小和位置、由窗口弹出的对话框、打开窗口与

2、关闭窗口，还可以控制窗口上是否显示地址栏、工具栏、状态栏等栏目。对于窗口中的内容，Window对象可以控制是否重载网页、返回上一个文档或前进到下一个文档，至于还可以停止加载文档。在框架方面，Window对象可以处理框架与框架之间的关系，并通过这种关系在一个框架处理另一个框架中的文档。Window对象还是所有其他对象的顶级对象，通过对Window对象的子对象进行操作，可以实现更多的动态效果。9.1.2 Window对象的使用方法作为一个对象，Window对象也有着自己的方法和属性。与其他对象类似，Window对象可以使用以下语句来调用其方法和属性。window.属性名window.方法名(参数列

3、表)（具体内容请参照书。）9.1.3 Window对象的属性Window对象中的属性比较多，这些属性大多都是浏览器窗口中所特有的属性，并且是不可移植的。（具体内容请参照书。）9.1.4 Window对象的方法除了属性之外，Window对象还拥有很多方法，（具体内容请参照书。）9.1.5 Window对象的事件除了方法和属性之外，Window对象还支持如表（具体内容请参照书。）9.2 Window对象事件常用的Window对象的事件包括blur、error、focus、load、move、resize和unload七种。通过这七种事件，可以在浏览器窗口装载与卸载文档、得到与失去焦点、移动和调整窗

4、口大小、执行代码出错时执行特定的程序。9.2.1 装载文档Window对象中的load事件通常作用在BODY元素中，也可以作用在IMG元素中。当作用在BODY元素中时，只有当整个网页都加完毕后才会被激发。在上网浏览网页的时候常常可以看到这样一种情况。在网页打开时，显示“正在打开”的几个字，只有当网页完全加载之后，才会显示其中的内容。（具体内容请参照书。）9.2.2 卸载文档与load事件相反，unload事件是在浏览器窗口卸载文档时所激发的事件。所谓卸载是浏览器的一个功能，即在加载新文档之前，浏览器会清除当前的浏览器窗口的内容。以下三种操作都会激发unload事件：（具体内容请参照书。）9.2

5、.3 得到焦点与失去焦点当浏览器窗口得到焦点时可以触发focus事件，所谓得到焦点是指浏览器窗口为当前的活动窗口。与得到焦点相反，当浏览器窗口失去焦点是可以触发blur事件。通常focus事件与blur事件都会联合起来使用，多用于网页中有动画的情况。（具体内容请参照书。）9.2.4 调整窗口大小当浏览器窗口大小被调整时，将会触发resize事件。在body元素里可以通过onresize属性来设置resize事件所调用的函数。例如一个网页，在某个尺寸窗口下浏览可能会达到比较完美的效果，那么就可以使用resize事件来监视用户是否改变了窗口大小，如果改变的话，就提示用户。（具体内容请参照书。）9.

6、2.5 错误处理Window对象中有一个可以用来处理错误信息的事件（error），这是一个十分特殊的事件。之所以特殊，是因为只在有当前窗口中发生了JavaScript错误时才会响应。这一点与trycatchfinally语句十分相似，但是error事件是由浏览器产生的。以IE浏览器为例，一旦产生了JavaScript错误，就会在左下角出现错误提示，（具体内容请参照书。）9.3 对话框Window对象里有三种方法，可以用来创建三种不同的对话框，分别为是警告框、确认框和提示框。9.3.1 警告框使用Window对象的alert()方法可以在浏览器窗口上弹出一个警告框，并且警告框里可以显示纯文本的文

7、字。alert()方法的语句代码为：window.alert(message)9.3.2 确认框使用Window对象的confirm()方法可以在浏览器窗口中弹出一个确认框。confirm()方法的语法代码如下所示：window.confirm(message)（具体内容请参照书。）9.3.3 提示框使用window对象的prompt()方法可以在浏览器窗口中弹出一个提示框。与警告框和确认框不同，在提示框中有一个输入框，用户可以在该输入框中输入文字。提示框的语法代码如下所示：window.prompt(message,defaulfText);（具体内容请参照书。）9.4 状态栏状态栏位于浏览

8、器底部，用于向用户显示信息，Window对象中的defaultStatus属性和status可以控制状态栏中的信息。9.4.1 状态栏介绍状态栏位于浏览器底部，用于向用户显示信息。在状态栏中可以显示的信息通常有以下两种：在浏览器加载文件的过程中，在状态栏里显示加载的文件或进度。当鼠标放在超链接上时，在状态栏里显示出超链接的URL。9.4.1 默认状态栏信息通常情况下，状态栏里的信息都是空的，只有在加载网页或将鼠标放在超链接上时，状态栏中才会显示这些瞬间信息。Window对象的defaultStatus属性可以用来设置在状态栏中的默认文本，当不显示瞬间信息时，状态栏可以显示这个默认文本。defa

9、ultStatus属性是一个可读写的字符串，有关defaultStatus属性的使用方法请看以下代码，（具体内容请参照书。）9.4.2 状态栏瞬间信息Window对象的defaultStatus属性可以用来读取或设置状态栏的默认信息，但如果要设置状态栏的瞬间信息，就必须要使用到Window对象的status属性了。在默认情况下，将鼠标放在一个超链接上时，状态栏会显示该超链接的URL，此时的状态栏信息就是瞬间信息。当鼠标离开超链接时，状态栏就会显示默认的状态栏信息，瞬间信息消失。（具体内容请参照书。）9.5 窗口操作窗口操作是Window对象中使用得比较多的操作之一，主要包括新开窗口、关闭窗口、

10、窗口聚焦、滚动窗口、移动窗口、调整窗口大小等操作。9.5.1 新开窗口9.5.1.1 open()方法的语法9.5.1.2 新开一个空白窗口9.5.1.3 新开一个有文档的窗口9.5.1.4 新开一个命名窗口9.5.1.5 设置新开窗口的特征9.5.1.6 设置浏览历史9.5.2 窗口名字window.open()方法可以设置新开窗口的名称，该窗口名称在a元素和form元素的target属性中使用，9.5.3 关闭窗口9.5.3.1 关闭自身窗口9.5.3.2 关闭由JavaScript代码创建的自身窗口9.5.3.3 关闭其他窗口9.5.3.4 判断窗口是否关闭9.5.4 窗口的引用9.5.

11、4.1 在新开窗口中输入文字9.5.4.2 操作新开窗口中的数据9.5.4.3 父级窗口的引用9.5.5 窗口聚焦所谓窗口聚焦，就是将输入焦点赋给窗口，也是平时所说的激活窗口，或让窗口成为当前窗口，此时可以在该窗口中进行鼠标或键盘操作。在操作系统中，如果同时打开了多个窗口，激活的那个窗口通常是在最上面。使用Window对象的focus()方法可让浏览器窗口获得焦点。focus()方法的语法代码如下所示：window.focus()window对象名.focus()（具体内容请参照书。）9.5.6 滚动文档Window对象中有三个方法可以用来滚动窗口中的文档，这三个方法如下所示：window.s

12、croll(x,y)window.scrollTo(x,y)window.scrollBy(x,y)（具体内容请参照书。）9.5.7 移动窗口Window对象中的以下两个方法可以用来移动浏览器窗口。window.moveTo(x,y)window.moveBy(x,y)（具体内容请参照书。）9.5.8 调整窗口大小Window对象中的以下两个方法可以用来调整浏览器窗口的大小：window.resizeTo(x,y)window.resizeBy(x,y)9.6 超时与时间间隔Window对象中还有一些方法可以用来设置代码的执行时间和执行方式，例如在某个指定的时间执行代码或让代码周期执行等。9.

13、6.1 延迟执行代码在JavaScript程序中，除了函数是需要调用时才执行的代码之外，所有代码都是在浏览器读取代码时立刻执行的。但使用Window对象的setTimeout()方法可以延迟代码的执行时间，也可以用该方法来指定代码的执行时间。setTimeout()方法的语法代码如下所示：window.setTimeout(code,delay)（具体内容请参照书。）9.6.2 周期性执行代码setTimeout()方法只能让代码在延迟一定时间后执行，并不能让代码反复执行。如果要让代码反复执行，就必须要使用到Window对象的setInterval()方法。该方法的语法代码如下所示：windo

14、w.setInterval(code,interval)window.setInterval(function,interval,parameters)（具体内容请参照书。）9.6.3 停止周期性执行代码使用setInterval()方法可以周期性执行代码，但是只有在少数情况下才需要将代码一直执行下去。在大多数情况下，只要达到了一定条件，都会需要停止代码的周期执行。Window对象中的clearInterval()方法可以停止周期性执行代码。clearInterval()方法的语法代码如下所示：window.clearInterval(id)（具体内容请参照书。）9.6.4 取消延迟执行与停止

15、周期性执行代码类似，Window对象中的clearTimeout()方法也可以取消延迟执行的代码。clearTimeout()方法的语法代码如下所示：window.clearTimeout(id)（具体内容请参照书。）9.7 框架操作HTML中的frameset元素可以创建框架。虽然在很多时候都把框架称为Frame对象，但是事实上，在JavaScript中并不存在Frame对象。所谓的Frame对象只是Window对象的一个实例，该对象拥有Window对象的所有方法和属性以及事件。9.7.1 框架介绍框架可以在同一个浏览器窗口里打开多个网页，并且这些网页之间并不是独立的，网页与网页之间的信息可

16、以有相互的联系。（具体内容请参照书。）9.7.2 框架的数量在Window对象中有一个frames属性，该属性是个数组，数组中的元素代表着框架中所包含的窗口。因此，在框架页中可以使用frames0表示第1个子窗口、frames1表示第2个子窗口，依此类推。如果一个窗口中没有包含框架，那么frames数组为空，也就是frames数组中的元素个数为0。（具体内容请参照书。）9.7.3 父窗口与子窗口框架中的窗口与窗口之间并不是没有联系的，如图9-19所示的就是框架页中窗口与窗口之间的关系。Window对象的frames属性是一个数组，该数组中的每一个元素都代表着框架页面中的子窗口。例如frames

17、0 代表第1个子窗口、frames1代表第2个子窗口，依此类推。frames数组中的元素也是Window对象，所以，通过frames数组中的元素，可以操作每个子窗口中的数据。（具体内容请参照书。）9.7.4 窗口之间的关系9.7.4.1 框架关系中常用到的属性9.7.4.2 一个复杂的框架9.7.4.3 框架自身的引用9.7.4.4 父窗口对子窗口的引用9.7.4.5 子窗口对父窗口及其他窗口的引用9.7.4.6 对顶级窗口的引用9.7.5 窗口的名字在使用HTML代码创建一个框架时，经常会使用到类似于下面的代码：9.8 Window对象的子对象Window对象是BOM模型中的顶层对象，因此所

18、有的BOM模型中的对象都是该对象的子对象。Window对象的子对象包括Document对象、History对象、Location对象、Math对象、Navigator对象、Screen对象等。9.8.1 Document对象Document对象引用的是HTML文档，因此Document对象可以说是在BOM模型中使用得最多的对象。Document对象可以对文档中的内容进行操作，如超链接颜色、文档的背景颜色、文档中的Cookies、表单、图片等等。有关Document对象在后续章节里还会详细介绍。9.8.2 History对象History对象所存储的是当前窗口的浏览历史。但是出于安全性的考虑，H

19、istory对象并不能调用浏览历史的记录，只能让当前窗口中的文档前进或后退到某一个已经访问过的URL。9.8.3 Location对象Location对象所引用的是当前文档的URL。使用Location对象可以获得当前文档的URL的各个部分，例如协议部分、主机名部分、端口部分、路径部分等。使用Location对象的search属性还可以得到URL的查询部分。Location对象还可以重载文档或用一个新文档来替换当前文档。9.8.4 Math对象Math对象在第六章中就已经做过介绍。Math对象主要作用是为数学计算提供常量和计算函数。Math对象是一种静态对象，可以直接拿来就可以使用，不需要去定

20、义一个数学对象实例。9.8.5 Navigator对象Navigator对象包含了浏览器的总体信息，例如浏览器的名称、版本信息、代码名称、浏览器版本所使用的默认语言、运行浏览器的硬件平台等。Navigator对象甚至还可以用来检测浏览器安装了一些什么插件、是否启用Java等高级功能。通过对Navigator对象的使用，可以收集用户的信息或者根据用户的浏览器信息来选择显示的页面。9.8.6 Screen对象Screen对象包含了有关用户所使用的显示器信息，例如显示器的分辨率、显示器的可用的颜色数量等信息。可以通过Screen对象对显示器分辨率的判断来调整用户浏览的网页，例如使用1024*768的

21、分辨率显示器的用户看到的是一个内容比较多的网页，而使用800*600分辨率显示器的用户看到的是一个内容比较少的网页。9.9 IE浏览器中的方法和属性除了前面章节中所介绍过的Window对象的方法和属性之外，IE浏览器对Window对象进行了扩展，拥有一些IE浏览器中才能使用的Window对象的方法和属性。不过不同版本的IE浏览器对这些方法和属性的支持情况可能也有所不同。以下方法与属性为IE 6.0浏览器所支持的方法和属性。9.9.1 IE浏览器中的方法IE浏览器中允许使用以下两个方法，（具体内容请参照书。）9.9.2 IE浏览器中的属性IE浏览器中为Window对象扩展了以下两个属性，（具体内

22、容请参照书。）9.10 Netscape浏览器中的方法和属性Netscape浏览器可以说是JavaScript的最早的支持者，因此，Netscape浏览器对Window对象扩展了更多的方法和属性。9.10.1 Netscape浏览器中的方法（具体内容请参照书。）9.10.2 Netscape浏览器中的属性（具体内容请参照书。）9.10.3 Netscape浏览器中的事件Netscape浏览器除了可以支持blur、error、focus、load、resize和unload事件之外，还支持move事件，也就是在移动窗口时激发的事件。9.11 小结在本章中介绍了Window对象的事件、方法和属性，Window对象是BOM结构模型中的顶层对象，是其他所有对象的父级对象。Window对象可以操作对话框、状态栏、浏览器窗口、框架，还可以让JavaScript代码延期执行或周期执行。Window对象的子对象在后续章节里将会陆续介绍，在下一章里将会介绍Screen对象和Navigator对象。