使用窗口和框架

1、使用窗口和框架使用窗口和框架第第1010章章本章主要内容包括：windowwindow对象的层次结构对象的层次结构使用使用JavaScriptJavaScript创建新的窗口创建新的窗口利用超时功能延迟脚本动作利用超时功能延迟脚本动作显示警告、确认和提示显示警告、确认和提示使用使用JavaScriptJavaScript处理框架处理框架创建基于创建基于JavaScriptJavaScript的导航框架的导航框架10.1.1 10.1.1 windowwindow对象的属性对象的属性 虽然通常只有一个虽然通常只有一个windowwindow对象，但是在使用弹出窗口或者框架时，对象，但是在使用弹出

2、窗口或者框架时，就可能有多个对象，就可能有多个对象，historyhistory、documentdocument和和locationlocation对象都是对象都是windowwindow对对象的属性象的属性( (或子对象或子对象) )。此外，每个。此外，每个windowwindow对象还有下列属性。对象还有下列属性。 window.window.closedclosed: :表示窗口是否已被关闭。表示窗口是否已被关闭。 window.window.defaultstatus/statusdefaultstatus/status: :设置或返回窗口状态栏中的默认文设置或返回窗口状态栏中的默认

3、文本。本。 window.window.framesframes: :针对框架的对象数组。针对框架的对象数组。 name: :为框架为框架( (或脚本打开的窗口或脚本打开的窗口) )指定名称。指定名称。 window.window.parentparent: :对于框架来说，是指包含该框架的父窗口。对于框架来说，是指包含该框架的父窗口。 window.window.openeropener: :在脚本打开的窗口中，是指包含打开的脚本的窗口。在脚本打开的窗口中，是指包含打开的脚本的窗口。 window.window.selfself: :当前当前windoww

4、indow对象的代名词。对象的代名词。 10.110.1用对象控制窗口用对象控制窗口10.110.1用对象控制用对象控制窗口窗口 window.window.toptop: :使用框架时对顶层窗口的引用。使用框架时对顶层窗口的引用。 window.window.screenscreen: :存储窗口所在屏幕信息的子对象存储窗口所在屏幕信息的子对象分辨率、色度等。分辨率、色度等。 window. window.documentdocument: :对对documentdocument对象的只读引用。对象的只读引用。 window. window.innerheightinnerheight: :

5、返回窗口的文档显示区的高度。返回窗口的文档显示区的高度。 window. window.innerwidthinnerwidth: :返回窗口的文档显示区的宽度。返回窗口的文档显示区的宽度。 window. window.lengthlength: :设置或返回窗口中的框架数量。设置或返回窗口中的框架数量。 window. name: :设置或返回窗口的名称。设置或返回窗口的名称。（附加）（附加）windowwindow对象的方法对象的方法 open(): open():打开一个新的浏览器窗口或查找一个已命名的窗口。打开一个新的浏览器窗口或查找一个已命名的窗口。 clos

6、e() close()：关闭浏览器窗口。：关闭浏览器窗口。 alert() alert()：显示带有一段消息和一个确认按钮的警告框。：显示带有一段消息和一个确认按钮的警告框。 print() print()：打印当前窗口的内容。：打印当前窗口的内容。 focus() focus()：把键盘焦点给予一个窗口。：把键盘焦点给予一个窗口。 prompt() prompt()：显示可提示用户输入的对话框。：显示可提示用户输入的对话框。 10.110.1用对象控制用对象控制窗口窗口 confirm(): confirm():显示带有一段消息以及确认按钮和取消按钮的对显示带有一段消息以及确认按钮和取消按钮

7、的对话框。话框。 resizeBy()resizeBy()：按照指定的像素调整窗口的大小。：按照指定的像素调整窗口的大小。 resizeTo()resizeTo()：把窗口的大小调整到指定的宽度和高度。：把窗口的大小调整到指定的宽度和高度。 moveBy()moveBy()：可相对窗口的当前坐标把它移动指定的像素。：可相对窗口的当前坐标把它移动指定的像素。 moveTo()moveTo()：把窗口的左上角移动到一个指定的坐标。：把窗口的左上角移动到一个指定的坐标。 setInterval()setInterval()：按照指定的周期（以毫秒计）来调用函数或：按照指定的周期（以毫秒计）来调用函数

8、或计算表达式。计算表达式。 setTimeout()setTimeout()：在指定的毫秒数后调用函数或计算表达式。：在指定的毫秒数后调用函数或计算表达式。 scrollBy()scrollBy()：按照指定的像素值来滚动内容。：按照指定的像素值来滚动内容。 scrollTo()scrollTo()：把内容滚动到指定的坐标：把内容滚动到指定的坐标。 10.110.1用对象控制用对象控制窗口窗口.2 创建新窗口创建新窗口 windowwindow对象最便利的应用之一是创建一个新窗口，可用于在不清对象最便利的应用之一是创建一个新窗口，可用于在不清除当前窗口的情况下显示文档除当前

9、窗口的情况下显示文档比如弹出广告（或者游戏说明）。比如弹出广告（或者游戏说明）。也可以为特定用途创建窗口，比如导航窗口。也可以为特定用途创建窗口，比如导航窗口。 可以使用可以使用window.open()window.open()方法创建一个新的浏览器窗口。打开新方法创建一个新的浏览器窗口。打开新窗口的典型语句如下所示：窗口的典型语句如下所示： WinObj=WinObj=window.open()window.open()(“URL”, “WindowName”, “Featur (“URL”, “WindowName”, “Featur List”);List”); 以下是以下是windo

10、w.open()window.open()语句中的各个组成部分：语句中的各个组成部分： 1.WinObj1.WinObj变量用于存储新的变量用于存储新的windowwindow对象。使用这个名称，可以访问新对象。使用这个名称，可以访问新对象的方法和属性。对象的方法和属性。 2.Window.open()2.Window.open()方法的第方法的第1 1个参数是一个个参数是一个URLURL，它将被加载到新的窗，它将被加载到新的窗口中。如果这个参数为空，则不会加载任何网页，这时可用口中。如果这个参数为空，则不会加载任何网页，这时可用10.110.1用对象控制用对象控制窗口窗口 JavaScrip

11、t JavaScript向窗口填充内容；向窗口填充内容；3.3.第第2 2个参数指定一个窗口名称（这里是个参数指定一个窗口名称（这里是WindowNameWindowName）。该参数被赋予）。该参数被赋予windowwindow对象的对象的namename属性，用于引用该窗口；属性，用于引用该窗口；4.4.第第3 3个参数是用逗号隔开的可选特性列表。可以通过选择是否包含工具个参数是用逗号隔开的可选特性列表。可以通过选择是否包含工具栏、状态栏和其他属性，对新窗口进行定制。可用来创建与典型浏览栏、状态栏和其他属性，对新窗口进行定制。可用来创建与典型浏览器窗口相去甚远的各种器窗口相去甚远的各种“悬

12、浮悬浮”窗口。窗口。 window.open()window.open()方法第方法第3 3个参数中的可选特性包括用于设定窗口大个参数中的可选特性包括用于设定窗口大小的小的widthwidth和和height(height(以像素为单位），以及可设置为以像素为单位），以及可设置为yes(1)yes(1)或或no(0)no(0)的几个特性：的几个特性：toolbartoolbar、locationlocation、directoriesdirectories、statusstatus、menubarmenubar、scrollbarsscrollbars和和resizableresizable。

13、可以只列出需要改变默认设置的特性。可以只列出需要改变默认设置的特性。下面这个实例将创建一个没有工具栏和状态栏的小窗口：下面这个实例将创建一个没有工具栏和状态栏的小窗口： SmallWin=SmallWin=window.openwindow.open(“”,“small”,“width=100,height=120,t(“”,“small”,“width=100,height=120,toolbar=0,status=0”);oolbar=0,status=0”); 10.110.1用对象控制用对象控制窗口窗口10.1.310.1.3 打开和关闭窗口打开和关闭窗口 窗口是可以关闭的，窗口是可以

14、关闭的，window.close()window.close()方法用于关闭窗口。浏览器方法用于关闭窗口。浏览器一般不允许在未得到用户许可的情况下关闭主浏览器窗口；这个方法一般不允许在未得到用户许可的情况下关闭主浏览器窗口；这个方法的主要用途是关闭自己创建的窗口。举例来说，下面这条语句用于关的主要用途是关闭自己创建的窗口。举例来说，下面这条语句用于关闭一个名为闭一个名为updatewindowupdatewindow的窗口：的窗口： updatewindow.updatewindow.close()close(); ; Eg. Eg.下面所示的下面所示的HTMLHTML文档将允许用户通过单击一

15、个按钮打开一个新的小文档将允许用户通过单击一个按钮打开一个新的小窗口，然后单击另一个按钮关闭该窗口。第窗口，然后单击另一个按钮关闭该窗口。第3 3个按钮用于尝试关闭当个按钮用于尝试关闭当前窗口，（能否成功取决于所用浏览器及其设置。如果可以关闭当前前窗口，（能否成功取决于所用浏览器及其设置。如果可以关闭当前窗口，大多数浏览器都会先要求确认该操作。）窗口，大多数浏览器都会先要求确认该操作。） Create a New Window Create a New Window 10.110.1用对象控制用对象控制窗口窗口 Create a New Window Create a New Window U

16、se the buttons below to test opening and closing windows Use the buttons below to test opening and closing windows in JavaScript.in JavaScript. input TYPE=button VALUE=Open New Window toolbar=no,status=no,width=200,height=100); input TYPE=button VALUE=Close New Window onClick=NewWin.close(); input T

17、YPE=button VALUE=Close Main Window onClick=window.close(); Have fun! Have fun! 10.210.2移动和调整窗口大小移动和调整窗口大小10.2 移动和调整窗口大小移动和调整窗口大小 DOMDOM也允许移动和调整窗口大小。下列方法可用于移动和调整任也允许移动和调整窗口大小。下列方法可用于移动和调整任何何windowwindow对象：对象： 1.window.moveTo()1.window.moveTo()可把窗口移动到一个新的位置，其参数指定新的可把窗口移动到一个新的位置，其参数指定新的x x轴（列）和轴（列）和y y

18、轴（行）的位置；轴（行）的位置； 2.window.moveBy()2.window.moveBy()相对于当前位置移动窗口，其相对于当前位置移动窗口，其x x和和y y参数可以为正参数可以为正值，也可以为负值，与当前位置的值相加，得出新的位置；值，也可以为负值，与当前位置的值相加，得出新的位置； 3.window.resizeTo()3.window.resizeTo()把窗口调整为指定的宽度和高度；把窗口调整为指定的宽度和高度； 4.window.resizeBy()4.window.resizeBy()相对于当前尺寸调整窗口大小，其参数用于修相对于当前尺寸调整窗口大小，其参数用于修改当前

19、的宽度和高度；改当前的宽度和高度； Eg.Eg.下面所示的下面所示的HTMLHTML文档含有允许调整主窗口大小（或移动它）的简单文档含有允许调整主窗口大小（或移动它）的简单脚本。脚本。10.210.2移动和调整窗口大移动和调整窗口大小小 Moving and resizing windows Moving and resizing windows function DoIt() function DoIt() if (document.form1.w.value & document.form1.h.value) if (document.form1.w.value & doc

20、ument.form1.h.value) self.resizeTo(document.form1.w.value,document.form1.h.value); self.resizeTo(document.form1.w.value,document.form1.h.value); if (document.form1.x.value & document.form1.y.value) if (document.form1.x.value & document.form1.y.value) self.moveTo(document.form1.x.value,docume

21、nt.form1.y.value); self.moveTo(document.form1.x.value,document.form1.y.value); Moving and Resizing Windows Moving and Resizing Windows 10.210.2移动和调整窗口大小移动和调整窗口大小 Width: Width: Height: Height: X-position: X-position: Y-position: Y-position: 在本例中，单击在本例中，单击Change WindowChange Window按钮时，按钮时，DoIt()DoIt()

22、函数将被作为事件函数将被作为事件处理程序来调用。该函数检查是否已指定宽度和高度值。如果已经指处理程序来调用。该函数检查是否已指定宽度和高度值。如果已经指定，它会使用定，它会使用self.resizeTo()self.resizeTo()方法来调整当前窗口的大小。同样，方法来调整当前窗口的大小。同样，如果已经指定了如果已经指定了x x和和y y值，它会使用值，它会使用self.moveTo()self.moveTo()来移动当前窗口。来移动当前窗口。10.3使用超时功能使用超时功能10.3 使用超时功能使用超时功能 有时最难的事是让脚步在特定的时段内什么也不做。幸运的是，有时最难的事是让脚步在特

23、定的时段内什么也不做。幸运的是，JavaScriptJavaScript含有一个针对此用途的内置函数。用含有一个针对此用途的内置函数。用window.setTimeoutwindow.setTimeout方法，可以指定一个延时以及延时之后开始执行的指令。方法，可以指定一个延时以及延时之后开始执行的指令。 调用调用setTimeout()setTimeout()方法，即可启动一个超时功能。该方法有两个方法，即可启动一个超时功能。该方法有两个参数，第参数，第1 1个是括在引号中的一条（或一组）个是括在引号中的一条（或一组）JavaScriptJavaScript语句，第语句，第2 2个个是以毫秒（

24、千分之一秒）为单位的等待时间。举例来说，下面这条语是以毫秒（千分之一秒）为单位的等待时间。举例来说，下面这条语句将在句将在1010秒后显示一个警告对话框：秒后显示一个警告对话框： ident=ident=window.setTimeoutwindow.setTimeout(“alert(Times up!)”,10000);(“alert(Times up!)”,10000); 超时功能的标识符存放在一个变量（本例中是超时功能的标识符存放在一个变量（本例中是identident）里。可以设）里。可以设置多个超时，每个都有自己的标识符。在超时期限到期之前，可以使置多个超时，每个都有自己的标识符。

25、在超时期限到期之前，可以使10.3使用超时功能使用超时功能 用用clearTimeout()clearTimeout()方法指定要停止的超时期限的标识符来停止它：方法指定要停止的超时期限的标识符来停止它： window.window.clearTimeoutclearTimeout(ident);(ident);Eg.使用超时功能更新页面使用超时功能更新页面 重复超时功能的方法是，在该超时期限调用的函数中再次调用重复超时功能的方法是，在该超时期限调用的函数中再次调用setTimeoutsetTimeout（）方法。下面的程序显示的是一个演示重复超时功能（）方法。下面的程序显示的是一个演示重复超

26、时功能 的的HTMLHTML文档。文档。 Timeout ExampleTimeout Example var counter=0; var counter=0; ID=window.setTimeout(Update();,2000); ID=window.setTimeout(Update();,2000); function Update() function Update() counter+; counter+;10.3使用超时功能使用超时功能 document.form1.input1.value=The counter is now at+counter;document.for

27、m1.input1.value=The counter is now at+counter; ID=window.setTimeout(Update();,2000); ID=window.setTimeout(Update();,2000); Timeout Example Timeout Example The text value below is being updated every two seconds. The text value below is being updated every two seconds. Press the RESET button to resta

28、rt the count,or the STOP button to Press the RESET button to restart the count,or the STOP button to stop it.stop it. input TYPE=button VALUE=STOP onClick=window.clearTimeout(ID); 10.410.4显示对话框显示对话框 这个程序每这个程序每2 2秒在一个文本字段里显示一则消息，包括一个每次秒在一个文本字段里显示一则消息，包括一个每次递增的计数器。单击递增的计数器。单击ResetReset按钮，可以重新开始计数；单击按钮

29、，可以重新开始计数；单击StopStop按钮按钮，可停止计数。，可停止计数。 在页面载入时，这个脚本将调用在页面载入时，这个脚本将调用setTimeout()setTimeout()方法，而且每次方法，而且每次更新都会再调用它。更新都会再调用它。Update()Update()函数执行更新、为计数器加函数执行更新、为计数器加1 1和并设置和并设置下一个超时功能。下一个超时功能。ResetReset按钮可把计数器设置为按钮可把计数器设置为0 0，StopStop按钮演示按钮演示clearTimeout()clearTimeout()方法。方法。10.4 10.4 显示对话框显示对话框 windo

30、wwindow对象含有对象含有3 3个方法，适用于显示消息并与用户交互。这里个方法，适用于显示消息并与用户交互。这里简要的介绍一下：简要的介绍一下：1.window.alert(message)1.window.alert(message)用于显示警告对话框。用于显示警告对话框。2.window.confirm(message)2.window.confirm(message)用于显示确认对话框，除一则消息外，还用于显示确认对话框，除一则消息外，还10.410.4显示对话框显示对话框 有有“确定确定”和和“取消取消”按钮。按钮。 3.mpt(message,default)

31、3.mpt(message,default)用于显示一则消息，并提醒用户用于显示一则消息，并提醒用户输入。它返回用户输入的文本。如果用户未输入任何内容，则使用默输入。它返回用户输入的文本。如果用户未输入任何内容，则使用默认值。认值。 若想使用若想使用confirm()confirm()和和prompt()prompt()方法，需要用一个变量来接收用户方法，需要用一个变量来接收用户的响应。例如，下面这条语句显示一则提示消息，并把用户输入的文的响应。例如，下面这条语句显示一则提示消息，并把用户输入的文本存储在本存储在texttext变量中：变量中： text=window.pr

32、ompt(“Enter some text”, “Default value”);text=mpt(“Enter some text”, “Default value”);Eg.Eg.创建显示对话框的脚本创建显示对话框的脚本 为进一步演示这类对话框，用户可以使用下面这个为进一步演示这类对话框，用户可以使用下面这个HTMLHTML文档中的按文档中的按钮和事件处理程序测试对话框。钮和事件处理程序测试对话框。10.410.4显示对话框显示对话框 Alerts, Confirmations, and Prompts Alerts, Confirmations, and Prompt

33、s Alters, Confirmations, and Prompts Alters, Confirmations, and Prompts Use the buttons below to test dialogs in JavaScript. Use the buttons below to test dialogs in JavaScript. input TYPE=button VALUE=Display an Alert onClick=window.alert(This is a test alert.); input TYPE=button VALUE=Display a Co

34、nfirmation onClick=window.confirm(Would you like to confirm?); input TYPE=button VALUE=Display a Prompt“ value); Have fun! Have fun! 10.510.5使用框架使用框架.1 为框架使用为框架使用JavaScriptJavaScript对象对象 在一个窗口含有多个框架时，每个框架在在一个窗口含有多个框架时，每个框架在JavaScriptJavaScript中都由一个中都由一个frameframe对象表示。该对象等效于对象表示。该对象等效于windowwindow对象，但是用于专门处理框架对象，但是用于专门处理框架。FrameFrame对象的名称与在对象的名称与在标签中指定的标签中指定的NAMENAME属性相同。属性相同。 在使用框架时，关键字在使用框架时，关键字windowwindow和和self