《【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”函数在前面的章节中已经做了详细介绍。其实这些函数都是窗口对象的方法。因为在JavaScri
3、pt中“window”对象可以省略不写，因此看上去好像是直接调用了一个函数来完成这些工作。（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”方法时，如果
5、给出了“sName”参数，且名为“sName”的窗口已经存在，则浏览器会将地址为“sURL”的页面装载入该窗口中。如果“sName”缺省，或者名为“sName”的窗口不存在，则会打开一个新的窗口。,8.3.2 检测弹窗动作是否被拦截,值得注意的是，随着浏览器的发展，未经过用户允许的弹出窗口行为被认为是不友好的，因而常常被浏览器（如IE6.0+Windows XP2或更高版本），或浏览器的插件拦截，无法完成打开新窗口的目的。为了检测打开的新窗口是否被拦截，可以使用前面章节中提及的错误捕获机制。代码.htm是一个可以根据浏览器行为不同而改变的页面。,8.3.3 色彩选择器“open”方法的应用,在
6、使用窗口对象A的“open”方法打开新窗口B后，新窗口B的“opener”属性被设置为指向窗口A。也就是说，可以在窗口B中使用脚本来控制原窗口。代码.htm是一个利用该特性的例子，其效果是一个色彩选择器。代码-color_dialog.htm是色彩选择器的对话框。,8.4 在网页中使用自定义的对话框,除了窗口的“open”方法外，JavaScript还提供了另外3种弹出窗口的形式，分别是：窗口的“createPopup”方法，用于建立一个弹出式窗体；窗口的“showModalDialog”方法，用于建立一个模式对话框；窗口的“showModelessDialog”方法，用于建立一个非模式对话框
7、。,8.4.1 模拟Windows帮助效果弹出式窗体的应用,“createPopup”方法的使用语法是：oPopup = window.createPopup();该方法返回一个弹出式窗体对象。该弹出窗体初始化的时候状态是隐藏不可见的。在显示弹出式窗体的时候，原窗体的已有焦点的元素不会失去焦点，因此也不会激发“onblur”事件。代码.htm是一个弹出式窗体的应用示例。,8.4.2 模式对话框和非模式对话框,在前面的小节中，有过用窗口的“open”方法打开新窗口来模拟Windows对话框的示例。JavaScript还提供了真正自定义对话框的方法：“showModalDialog”和“showM
8、odelessDialog”。这两种方法的语法类似：showModalDialog(sURL , vArguments , sFeatures);showModelessDialog (sURL , vArguments , sFeatures);参数“sURL”是字符串型变量，必须提供，指向该对话框应装载的HTML页面的URL地址。参数“vArguments”可选，可以是任意类型的变量，甚至可以是数组等对象。其作用是传递给对话框窗口的参数。在对话框窗口中，可以访问“dialogArguments”来获取这些参数。参数“sFeatures”和前面介绍的“open”方法中的参数“sFeature
9、s”类似，同样是包含了一些键值对的字符串。,8.5 延时函数的使用,在JavaScript执行的过程中，程序员有时希望脚本不要立即执行，比如当用户鼠标移入某一文本框后，停留间隔超过2秒才将该文本框内容清空。或者有时希望能每间隔一段时间执行一次某函数。这些需求都可以由窗口对象的超时函数（“setTimeout”）和定时函数（“setInterval”）来实现。,8.5.1 定时函数的设定和取消,超时函数（“setTimeout”）和定时函数（“setInterval”）的调用语法为：timeHandle = setTimeout(functionHandle, times);timeHandle
10、 = setTimeout(“JavaScript脚本”, 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 可以收起的分栏改变框架的分割比例,有时网页中存
13、在着框架结构。构成框架的模式有两种，一种是利用“frameset”构成的框架结构，另一种是“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.getElement
15、ById(“hutia”);,8.6.2 可以收起和展开的侧边框架,代码.htm是一个操作框架的示例，演示的是可以收起和展开侧边框架的效果。代码说明：（1）为便于演示和精简代码，本示例中，左侧分栏“frame”的HTML内容由顶层窗口使用“document.write”写入生成。注意这里使用“window.frames0”来获得对左侧分栏窗口对象的引用。并使用该子窗口的“document”对象来写入HTML内容。（2）本例中使用了一个新的“document”方法“getElementsByTagName”。（3）代码中使用“document.write”将顶层窗口中的“style”块的内容写入
16、到子窗口中。（4）折叠或展开分栏的分隔条是一个超链接，其链接指向“javascript:void(top.resizeFrame();”。“javascript:”表明此超链接指向一小段JavaScript脚本。“void”函数表示什么也不做。因为浏览器会自动的把脚本执行的返回值作为窗口的内容，因此此处用“void”函数来避免此类情形。,8.6.3 跨窗口调用JavaScript脚本,前一小节的示例代码8-9.htm中，当用户在单击左侧边栏的链接时，实际上却调用了顶层窗口中的函数“resizeFrame”。在JavaScript中，所有的函数都是归属于其所在的窗口的。也就是说，假设窗口A中定义
17、了函数“functionA”，那么在其他任意窗口中（既可以是窗口A的子窗口或父窗口，也可以是窗口A所打开的新窗口等），只要能获得对窗口A的引用，就可以以“A.functionA()”的形式调用该函数。跨窗口的脚本调用有助于理清程序员的思路，节省编写代码的工作量。在一个由很多框架和内嵌框架组成的页面中，可以将所有的函数集中定义在顶层窗口中，然后在每个内嵌的子窗口中调用。这样比起为每个窗口编写一遍函数，工作量会大大减轻。需要注意的是，如果框架或窗口之间并不处于同一个域中，处于安全的考虑，浏览器通常会禁止这种跨窗口的访问。例如，在页面中有一个指向“http:/”的内嵌窗口，那么页面中对这个内嵌窗口的所有脚本函数的调用，以及对此子窗口的“document”对象的访问都会被禁止。,
