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