第8章 操作窗口和框架.ppt

第8章操作窗口和框架 JavaScript作为一种客户端的脚步语言 其必须依赖于客户端浏览器的解释和执行 不能独立于浏览器存在 另一方面 JavaScript是被作为HTML语言的一个部分存在的 在JavaScript中 将浏览器中载入页面的各个部分按HTML标记区分为各种对应的对象 8 1示例 模拟LiveMessenger的振动闪屏功能 HTML标记从数据结构上来说属于树的拓扑 从根节点 HTML 标记开始 其每个子集都是一颗子树 因此在JavaScript中 页面元素对应的脚本对象也具有树的结构特点 和HTML文档中的结构相对应 最高的页面对象是窗口对象 window 对象 代码 htm是使用脚本操作窗口对象 模拟微软的即时聊天工具LiveMessenger的振动闪屏功能 8 2控制窗口 窗口对象的事件 属性和方法 窗口对象是页面元素对象中比较重要的一个对象 因为其地位比较特殊 窗口对象作为所有页面元素对象的根对象 不仅有着一般页面元素所具有的基本的事件 属性和方法 也有着其自身独有的某些特质 8 2 1获取窗口的改变 窗口对象的事件 表中列出了常见的窗口对象事件 8 2 2控制窗口的行为 窗口对象的方法 1 关于 alert confirm 和 prompt 函数在前面的章节中已经做了详细介绍 其实这些函数都是窗口对象的方法 因为在JavaScript中 window 对象可以省略不写 因此看上去好像是直接调用了一个函数来完成这些工作 2 窗口对象的 close 方法可以用来关闭窗口 在InternetExplorer浏览器中 对于由原浏览器窗口点击链接 或通过脚本打开的窗口 调用 close 方法时窗口可以直接关闭 但如果是通过双击桌面图标等方式打开的新窗口 在试图使用脚本关闭时会出现提示 询问是否同意关闭当前窗口 3 execScript 方法有点类似于 eval 函数 两者都是将一段字符串作为脚本代码来解释执行 但两者间也有着很大的不同 8 3打开一个新窗口 窗口的 open 方法详解 窗口的 open 方法是窗口对象一个非常常用的方法 其作用是打开一个新的窗口 该方法接受三个参数 其调用的语法为 open sURL sName sFeatures bReplace 8 3 1 open 方法的参数说明 参数 sURL 是字符型变量 可选 指定新打开的窗口应当装载页面的URL 缺省时打开一个空白的窗口 参数 sName 是字符型变量 可选 指定打开窗口的名称 需要注意的是 这里的窗口名称不同于窗口标题栏中的标题 浏览器窗口的名称是窗口对象的一个属性 比如浏览者在点击下面的链接时 点我啊会打开一个新的浏览器窗口 该窗口的名称就是 TheWinName 在调用窗口对象的 open 方法时 如果给出了 sName 参数 且名为 sName 的窗口已经存在 则浏览器会将地址为 sURL 的页面装载入该窗口中 如果 sName 缺省 或者名为 sName 的窗口不存在 则会打开一个新的窗口 8 3 2检测弹窗动作是否被拦截 值得注意的是 随着浏览器的发展 未经过用户允许的弹出窗口行为被认为是不友好的 因而常常被浏览器 如IE6 0 WindowsXP2或更高版本 或浏览器的插件拦截 无法完成打开新窗口的目的 为了检测打开的新窗口是否被拦截 可以使用前面章节中提及的错误捕获机制 代码 htm是一个可以根据浏览器行为不同而改变的页面 8 3 3色彩选择器 open 方法的应用 在使用窗口对象A的 open 方法打开新窗口B后 新窗口B的 opener 属性被设置为指向窗口A 也就是说 可以在窗口B中使用脚本来控制原窗口 代码 htm是一个利用该特性的例子 其效果是一个色彩选择器 代码 color dialog htm是色彩选择器的对话框 8 4在网页中使用自定义的对话框 除了窗口的 open 方法外 JavaScript还提供了另外3种弹出窗口的形式 分别是 窗口的 createPopup 方法 用于建立一个弹出式窗体 窗口的 showModalDialog 方法 用于建立一个模式对话框 窗口的 showModelessDialog 方法 用于建立一个非模式对话框 8 4 1模拟Windows帮助效果 弹出式窗体的应用 createPopup 方法的使用语法是 oPopup window createPopup 该方法返回一个弹出式窗体对象 该弹出窗体初始化的时候状态是隐藏不可见的 在显示弹出式窗体的时候 原窗体的已有焦点的元素不会失去焦点 因此也不会激发 onblur 事件 代码 htm是一个弹出式窗体的应用示例 8 4 2模式对话框和非模式对话框 在前面的小节中 有过用窗口的 open 方法打开新窗口来模拟Windows对话框的示例 JavaScript还提供了真正自定义对话框的方法 showModalDialog 和 showModelessDialog 这两种方法的语法类似 showModalDialog sURL vArguments sFeatures showModelessDialog sURL vArguments sFeatures 参数 sURL 是字符串型变量 必须提供 指向该对话框应装载的HTML页面的URL地址 参数 vArguments 可选 可以是任意类型的变量 甚至可以是数组等对象 其作用是传递给对话框窗口的参数 在对话框窗口中 可以访问 dialogArguments 来获取这些参数 参数 sFeatures 和前面介绍的 open 方法中的参数 sFeatures 类似 同样是包含了一些键值对的字符串 8 5延时函数的使用 在JavaScript执行的过程中 程序员有时希望脚本不要立即执行 比如当用户鼠标移入某一文本框后 停留间隔超过2秒才将该文本框内容清空 或者有时希望能每间隔一段时间执行一次某函数 这些需求都可以由窗口对象的超时函数 setTimeout 和定时函数 setInterval 来实现 8 5 1定时函数的设定和取消 超时函数 setTimeout 和定时函数 setInterval 的调用语法为 timeHandle setTimeout functionHandle times timeHandle setTimeout JavaScript脚本 times timeHandle setInterval functionHandle times timeHandle setInterval JavaScript脚本 times 1 setTimeout 和 setInterval 接受的第一个参数有两种形式 一种是将函数的引用句柄作为参数提供给该方法 另一种是直接提供字符串作为需要执行的JavaScript脚本 2 setTimeout 和 setInterval 接受的第二个参数指的是需要延时执行的时间 单位是毫秒 setTimeout 方法在延时时间到达后 执行其接受的第一个参数所指向的脚本一次 然后延时执行结束 setInterval 方法则每间隔一个延时时间 执行其接受的第一个参数所指向的脚本一次 反复循环执行 除非用户显示的调用 clearInterval 方法停止其执行 3 值得注意的是 如果在 setInterval 或 setTimeout 方法中 每间隔一个固定时间 去执一个性质类似 alert 或 showModalDialog 之类的会导致系统脚本执行暂停的方法 则在等待用户单击 alert 警告框的 确定 按钮所消耗的时间不会计入定时函数的计时总数中 4 setInterval 和 setTimeout 方法在计数器到期 执行相应脚本的时候 此脚本处于全局的环境中 而和 setInterval 和 setTimeout 方法所处的上下文环境无关 8 5 2综合应用 动态提示窗口 随着对用户体验重视程度的提高 各种人性化的交互方式逐渐出现在Windows程序中 比如以前的 alert 那种警告框式的弹出信息 在很多程序中被一个从屏幕右下角滑动弹出的小信息窗口代替 如果用户对此信息不予理睬 那么过一段时间此窗口还会自动的消失 代码 htm是一个综合了 open窗口 和定时函数的例子 在浏览器窗口中模拟实现了此效果 动态提示窗口的运行效果 8 6可以收起的分栏 改变框架的分割比例 有时网页中存在着框架结构 构成框架的模式有两种 一种是利用 frameset 构成的框架结构 另一种是 iframe 标记的内嵌式框架 无论是哪一种框架结构 从JavaScript的角度看待时 其本质都是一样的 都是窗口对象的嵌套应用 8 6 1嵌套窗口的结构 所有的窗口对象 window 都有一个指向最顶层窗口对象的指针 top 也就是说 可以通过 window top 来获得对用户实际的窗口的引用 同样的 窗口有 parent 指针 指向其父窗口 对于最顶层的窗口来说 其 window top 和 window parent 都指向其自身 每个窗口对象都有一个名为 frames 的对象集合 此集合的子对象是该窗口所包含的所有子窗口 框架和内嵌框架 但不包括其子窗口所包含的子窗口 有该集合的行为类似于数组对象 Array 有着标识其组成元素的个数的属性 length 同样通过方括号 和数字索引来访问其子元素 元素的索引自0开始 如果窗口中没有子窗口 则 frames 的长度为0 可以用类似遍历数组的方法 通过循环来遍历 frames 所有的元素 frames 集合所包含的元素是子窗口对象 意味着每个窗口都是一个完整的 window 对象 其有着自己的 document 等独立的属性 需要注意的是 例如下面的的代码 varobj document getElementById hutia 8 6 2可以收起和展开的侧边框架 代码 htm是一个操作框架的示例 演示的是可以收起和展开侧边框架的效果 代码说明 1 为便于演示和精简代码 本示例中 左侧分栏 frame 的HTML内容由顶层窗口使用 document write 写入生成 注意这里使用 window frames 0 来获得对左侧分栏窗口对象的引用 并使用该子窗口的 document 对象来写入HTML内容 2 本例中使用了一个新的 document 方法 getElementsByTagName 3 代码中使用 document write 将顶层窗口中的 style 块的内容写入到子窗口中 4 折叠或展开分栏的分隔条是一个超链接 其链接指向 javascript void top resizeFrame javascript 表明此超链接指向一小段JavaScript脚本 void 函数表示什么也不做 因为浏览器会自动的把脚本执行的返回值作为窗口的内容 因此此处用 void 函数来避免此类情形 8 6 3跨窗口调用JavaScript脚本 前一小节的示例代码8 9 htm中 当用户在单击左侧边栏的链接时 实际上却调用了顶层窗口中的函数 resizeFrame 在JavaScript中 所有的函数都是归属于其所在的窗口的 也就是说 假设窗口A中定义了函数 functionA 那么在其他任意窗口中 既可以是窗口A的子窗口或父窗口 也可以是窗口A所打开的新窗口等 只要能获得对窗口A的引用 就可以以 A functionA 的形式调用该函数 跨窗口的脚本调用有助于理清程序员的思路 节省编写代码的工作量 在一个由很多框架和内嵌框架组成的页面中 可以将所有的函数集中定义在顶层窗口中 然后在每个内嵌的子窗口中调用 这样比起为每个窗口编写一遍函数 工作量会大大减轻 需要注意的是 如果框架或窗口之间并不处于同一个域中 处于安全的考虑 浏览器通常会禁止这种跨窗口的访问 例如 在页面中有一个指向 的内嵌窗口 那么页面中对这个内嵌窗口的所有脚本函数的调用 以及对此子窗口的 document 对象的访问都会被禁止 8 7小结 本章主要讲