第9章窗口与框架

第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错误时才会响应 这一点与try catch finally语句十分相似 但是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 方法可以在浏览器窗口中弹出一个提示框 与警告框和确认框不同 在提示框中有一个输入框 用户可以在该输入框中输入文字 提示框的语法代码如下所示 window prompt 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新开窗口 9 5 1 1open 方法的语法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 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 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属性 该属性是个数组 数组中的元素代表着框架中所包含的窗口 因此 在框架页中可以使用frames 0 表示第1个子窗口 frames 1 表示第2个子窗口 依此类推 如果一个窗口中没有包含框架 那么frames 数组为空 也就是frames 数组中的元素个数为0 具体内容请参照书 9 7 3父窗口与子窗口 框架中的窗口与窗口之间并不是没有联系的 如图9 19所示的就是框架页中窗口与窗口之间的关系 Window对象的frames属性是一个数组 该数组中的每一个元素都代表着框架页面中的子窗口 例如frames 0 代表第1个子窗口 frames 1 代表第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 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浏览器中的方法