第9章窗口与框架06436

第9章窗口与框架,窗口操作是JavaScript中一个很重要的操作。所谓窗口是指浏览器窗口，也是通常所说的Window对象。使用HTML中的FRAMESET元素可以在一个窗口中使用多个框架，框架是窗口的一个重要组成部分。在本章里将会介绍Window对象的方法、属性和事件。,9.1Window对象,Window对象是一个全局对象、是所有对象的顶级对象，在JavaScript中有着举足轻重的作用。Window对象作为对象的一种，也有着自己的方法和属性。,9.1.1Window对象介绍,Window对象代表的是打开的浏览器窗口。通过Window对象可以控制窗口的大小和位置、由窗口弹出的对话框、打开窗口与关闭窗口，还可以控制窗口上是否显示地址栏、工具栏、状态栏等栏目。对于窗口中的内容，Window对象可以控制是否重载网页、返回上一个文档或前进到下一个文档，至于还可以停止加载文档。在框架方面，Window对象可以处理框架与框架之间的关系，并通过这种关系在一个框架处理另一个框架中的文档。Window对象还是所有其他对象的顶级对象，通过对Window对象的子对象进行操作，可以实现更多的动态效果。,9.1.2Window对象的使用方法,作为一个对象，Window对象也有着自己的方法和属性。与其他对象类似，Window对象可以使用以下语句来调用其方法和属性。window.属性名window.方法名(参数列表)（具体内容请参照书。）,9.1.3Window对象的属性,Window对象中的属性比较多，这些属性大多都是浏览器窗口中所特有的属性，并且是不可移植的。（具体内容请参照书。）,9.1.4Window对象的方法,除了属性之外，Window对象还拥有很多方法，（具体内容请参照书。）,9.1.5Window对象的事件,除了方法和属性之外，Window对象还支持如表（具体内容请参照书。）,9.2Window对象事件,常用的Window对象的事件包括blur、error、focus、load、move、resize和unload七种。通过这七种事件，可以在浏览器窗口装载与卸载文档、得到与失去焦点、移动和调整窗口大小、执行代码出错时执行特定的程序。,9.2.1装载文档,Window对象中的load事件通常作用在BODY元素中，也可以作用在IMG元素中。当作用在BODY元素中时，只有当整个网页都加完毕后才会被激发。在上网浏览网页的时候常常可以看到这样一种情况。在网页打开时，显示“正在打开”的几个字，只有当网页完全加载之后，才会显示其中的内容。（具体内容请参照书。）,9.2.2卸载文档,与load事件相反，unload事件是在浏览器窗口卸载文档时所激发的事件。所谓卸载是浏览器的一个功能，即在加载新文档之前，浏览器会清除当前的浏览器窗口的内容。以下三种操作都会激发unload事件：（具体内容请参照书。）,9.2.3得到焦点与失去焦点,当浏览器窗口得到焦点时可以触发focus事件，所谓得到焦点是指浏览器窗口为当前的活动窗口。与得到焦点相反，当浏览器窗口失去焦点是可以触发blur事件。通常focus事件与blur事件都会联合起来使用，多用于网页中有动画的情况。（具体内容请参照书。）,9.2.4调整窗口大小,当浏览器窗口大小被调整时，将会触发resize事件。在body元素里可以通过onresize属性来设置resize事件所调用的函数。例如一个网页，在某个尺寸窗口下浏览可能会达到比较完美的效果，那么就可以使用resize事件来监视用户是否改变了窗口大小，如果改变的话，就提示用户。（具体内容请参照书。）,9.2.5错误处理,Window对象中有一个可以用来处理错误信息的事件（error），这是一个十分特殊的事件。之所以特殊，是因为只在有当前窗口中发生了JavaScript错误时才会响应。这一点与trycatchfinally语句十分相似，但是error事件是由浏览器产生的。以IE浏览器为例，一旦产生了JavaScript错误，就会在左下角出现错误提示，（具体内容请参照书。）,9.3对话框,Window对象里有三种方法，可以用来创建三种不同的对话框，分别为是警告框、确认框和提示框。,9.3.1警告框,使用Window对象的alert()方法可以在浏览器窗口上弹出一个警告框，并且警告框里可以显示纯文本的文字。alert()方法的语句代码为：window.alert(message),9.3.2确认框,使用Window对象的confirm()方法可以在浏览器窗口中弹出一个确认框。confirm()方法的语法代码如下所示：window.confirm(message)（具体内容请参照书。）,9.3.3提示框,使用window对象的prompt()方法可以在浏览器窗口中弹出一个提示框。与警告框和确认框不同，在提示框中有一个输入框，用户可以在该输入框中输入文字。提示框的语法代码如下所示：mpt(message,defaulfText);（具体内容请参照书。）,9.4状态栏,状态栏位于浏览器底部，用于向用户显示信息，Window对象中的defaultStatus属性和status可以控制状态栏中的信息。,9.4.1状态栏介绍,状态栏位于浏览器底部，用于向用户显示信息。在状态栏中可以显示的信息通常有以下两种：在浏览器加载文件的过程中，在状态栏里显示加载的文件或进度。当鼠标放在超链接上时，在状态栏里显示出超链接的URL。,9.4.1默认状态栏信息,通常情况下，状态栏里的信息都是空的，只有在加载网页或将鼠标放在超链接上时，状态栏中才会显示这些瞬间信息。Window对象的defaultStatus属性可以用来设置在状态栏中的默认文本，当不显示瞬间信息时，状态栏可以显示这个默认文本。defaultStatus属性是一个可读写的字符串，有关defaultStatus属性的使用方法请看以下代码，（具体内容请参照书。）,9.4.2状态栏瞬间信息,Window对象的defaultStatus属性可以用来读取或设置状态栏的默认信息，但如果要设置状态栏的瞬间信息，就必须要使用到Window对象的status属性了。在默认情况下，将鼠标放在一个超链接上时，状态栏会显示该超链接的URL，此时的状态栏信息就是瞬间信息。当鼠标离开超链接时，状态栏就会显示默认的状态栏信息，瞬间信息消失。（具体内容请参照书。）,9.5窗口操作,窗口操作是Window对象中使用得比较多的操作之一，主要包括新开窗口、关闭窗口、窗口聚焦、滚动窗口、移动窗口、调整窗口大小等操作。,9.5.1新开窗口,open()方法的语法新开一个空白窗口新开一个有文档的窗口新开一个命名窗口设置新开窗口的特征设置浏览历史,9.5.2窗口名字,window.open()方法可以设置新开窗口的名称，该窗口名称在a元素和form元素的target属性中使用，,9.5.3关闭窗口,关闭自身窗口关闭由JavaScript代码创建的自身窗口关闭其他窗口判断窗口是否关闭,9.5.4窗口的引用,在新开窗口中输入文字操作新开窗口中的数据父级窗口的引用,9.5.5窗口聚焦,所谓窗口聚焦，就是将输入焦点赋给窗口，也是平时所说的激活窗口，或让窗口成为当前窗口，此时可以在该窗口中进行鼠标或键盘操作。在操作系统中，如果同时打开了多个窗口，激活的那个窗口通常是在最上面。使用Window对象的focus()方法可让浏览器窗口获得焦点。focus()方法的语法代码如下所示：window.focus()window对象名.focus()（具体内容请参照书。）,9.5.6滚动文档,Window对象中有三个方法可以用来滚动窗口中的文档，这三个方法如下所示：window.scroll(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.6.1延迟执行代码,在JavaScript程序中，除了函数是需要调用时才执行的代码之外，所有代码都是在浏览器读取代码时立刻执行的。但使用Window对象的setTimeout()方法可以延迟代码的执行时间，也可以用该方法来指定代码的执行时间。setTimeout()方法的语法代码如下所示：window.setTimeout(code,delay)（具体内容请参照书。）,9.6.2周期性执行代码,setTimeout()方法只能让代码在延迟一定时间后执行，并不能让代码反复执行。如果要让代码反复执行，就必须要使用到Window对象的setInterval()方法。该方法的语法代码如下所示：window.setInterval(code,interval)window.setInterval(function,interval,parameters)（具体内容请参照书。）,9.6.3停止周期性执行代码,使用setInterval()方法可以周期性执行代码，但是只有在少数情况下才需要将代码一直执行下去。在大多数情况下，只要达到了一定条件，都会需要停止代码的周期执行。Window对象中的clearInterval()方法可以停止周期性执行代码。clearInterval()方法的语法代码如下所示：window.clearInterval(id)（具体内容请参照书。）,9.6.4取消延迟执行,与停止周期性执行代码类似，Window对象中的clearTimeout()方法也可以取消延迟执行的代码。clearTimeout()方法的语法代码如下所示：window.clearTimeout(id)（具体内容请参照书。）,9.7框架操作,HTML中的frameset元素可以创建框架。虽然在很多时候都把框架称为Frame对象，但是事实上，在JavaScript中并不存在Frame对象。所谓的Frame对象只是Window对象的一个实例，该对象拥有Window对象的所有方法和属性以及事件。,9.7.1框架介绍,框架可以在同一个浏览器窗口里打开多个网页，并且这些网页之间并不是独立的，网页与网页之间的信息可以有相互的联系。（具体内容请参照书。）,9.7.2框架的数量,在Window对象中有一个frames属性，该属性是个数组，数组中的元素代表着框架中所包含的窗口。因此，在框架页中可以使用frames0表示第1个子窗口、frames1表示第2个子窗口，依此类推。如果一个窗口中没有包含框架，那么frames数组为空，也就是frames数组中的元素个数为0。（具体内容请参照书。）,9.7.3父窗口与子窗口,框架中的窗口与窗口之间并不是没有联系的，如图9-19所示的就是框架页中窗口与窗口之间的关系。Window对象的frames属性是一个数组，该数组中的每一个元素都代表着框架页面中的子窗口。例如frames0代表第1个子窗口、frames1代表第2个子窗口，依此类推。frames数组中的元素也是Window对象，所以，通过frames数组中的元素，可以操作每个子窗口中的数据。（具体内容请参照书。）,9.7.4窗口之间的关系,框架关系中常用到的属性一个复杂的框架框架自身的引用父窗口对子窗口的引用子窗口对父窗口及其他窗口的引用对顶级窗口的引用,9.7.5窗口的名字,在使用HTML代码创建一个框架时，经常会使用到类似于下面的代码：,9.8Window对象的子对象,Window对象是BOM模型中的顶层对象，因此所有的BOM模型中的对象都是该对象的子对象。Window对象的子对象包括Document对象、History对象、Location对象、Math对象、Navigator对象、Screen对象等。,9.8.1Document对象,Document对象引用的是HTML文档，因此Document对象可以说是在BOM模型中使用得最多的对象。Document对象可以对文档中的内容进行操作，如超链接颜色、文档的背景颜色、文档中的Cookies、表单、图片等等。有关Document对象在后续章节里还会详细介绍。,9.8.2History对象,History对象所存储的是当前窗口的浏览历史。但是出于安全性的考虑，History对象并不能调用浏览历史的记录，只能让当前窗口中的文档前进或后退到某一个已经访问过的URL。,9.8.3Location对象,Location对象所引用的是当前文档的URL。使用Location对象可以获得当前文档的URL的各个部分，例如协议部分、主机名部分、端口部分、路径部分等。使用Location对象的search属性还可以得到URL的查询部分。Location对象还可以重载文档或用一个新文档来替换当前文档。,9.8.4Math对象,Math对象在第六章中就已经做过介绍。Math对象主要作用是为数学计算提供常量和计算函数。Math对象是一种静态对象，可以直接拿来就可以使用，不需要去定义一个数学对象实例。,9.8.5Navigator对象,Navigator对象包含了浏览器的总体信息，例如浏览器的名称、版本信息、代码名称、浏览器版本所使用的默认语言、运行浏览器的硬件平台等。Navigator对象甚至还可以用来检测浏览器安装了一些什么插件、是否启用Java等高级功能。通过对Navigator对象的使用，可以收集用户的信息或者根据用户的浏览器信息来选择显示的页面。,9.8.6Screen对象,Screen对象包含了有关用户所使用的显示器信息，例如显示器的分辨率、显示器的可用的颜色数量等信息。可以通过Screen对象对显示器分辨率的判断来调整用户浏览的网页，例如使用1024*768的分辨率显示器的用户看到的是一个内容比较多的网页，而使用800*600分辨率显示器的用户看到的是一个内容比较少的网页。,9.9IE浏览器中的方法和属性,除