第三章

第三章 窗口对象、文档对象与框架对象

课程目标 • 熟悉JavaScript的窗口对象，包括opener、self、parent、top等。 • 熟悉document、location、history、locationbar、menubar、scrollbars、statusbar、toolbar属性，alert()、confirm()、close()、open()、forward()，back()等方法。 • 理解文档对象中的links、anchors、forms、TITLE属性和write()方法，熟练框架对象中的Frames属性。

体验项目——<“清华IT软件俱乐部”欢迎窗口> 想在窗口中使用框架吗？想将页面显示到框架中吗？想知道框架的标题吗？想在页面中使用滚动字幕吗？请看本章的体验程序，程序运行后的首页面如图3-1所示：当用户点击“学员登录”后，进入“学员登录”页面，如图所示

在“学员登录”页面中输入用户姓名，例如填入“那英”，然后点击“填写完毕”按钮，将显示如图所示页面： 当用户点击“热门课程”后，将进入“热门课程”页面，如图3-4所示

窗口对象 窗口对象是JavaScript对象的主要对象之一，而窗口对象中最常用的以下几种： opener对象 self对象 parent对象 top对象 history历史对象

opener对象和self对象 opener对象可以用于确定open方法打开窗口的源窗口。 self对象实际上代表的是窗口自身，是用于对窗口对象自身的一些属性进行控制。下面看一个opener和self对象的使用示例，下例将用一个父窗口打开一个子窗口，然后在子窗口中设置两个链接接，用以改变父窗口的背景色。将主窗口的代码保存为main.html，而将子窗口的代码保存为sub.html。主窗口main.html <script> queryWin=open('sub.html','','height=100 width=150') </script> 在主窗口用open方法打开文件sub.html作为子窗口，其中高度为100，宽度用默认值

子窗口sub.html <script> function passToOpener(color) { opener.document.bgColor=color; self.close(); } </script> <center> 请选择你喜欢的颜色?<br> <a href="" onClick="passToOpener('BLUE')">蓝色</a> <a href="" onClick="passToOpener('RED')">红色</a> </center> 改变父窗口的颜色关闭子窗口调用改变父窗口颜色的函数

parent对象 parent对象仅仅是对子窗口有意义，也就是说，窗口不是顶层窗口。 parent的属性请大家参考框架的框架集窗口，这一点我们以后还会讲到，一个框架集内的子窗口可以使用parent.frameName来查访它的兄弟窗口，比如：一个框架集中的第四个窗口有一个属性name=“homeFrame”，那么它的兄弟窗口可以通过使用parent.homeFrame或者parent.frames[3]去访问它。

top对象 top对象是顶层窗口的同义词，可以通过使用top.close()将顶层窗口关闭，可以通过使用top.length来得到顶层窗口中含有的框架个数。

location位置对象 location位置对象：用来代表特定窗口的URL信息。 URL的格式：protocol//host:port/path#hash?search URL的种类主要有：http、file、ftp、mailto、news location位置对象的属性说明

location位置对象的方法 比如，要实现当按下一个按钮后前往网易网站，那么使用下面的代码 <input type="button" value="走吧！" onClick="location.href='http://www.163.com/'">

history历史对象 用于存储客户端最近访问过的网址清单 history历史对象的属性 history 历史对象的方法

窗口常用方法 窗口的常用方法有以下几种: alert()方法 confirm()方法 close()方法 open()方法 forward()方法 back()方法

点击 alert()方法 alert()方法显示一个带有“确定”按钮的消息框语法：alert("message") 参数：message是一个字符串下面的例子是点击按钮执行alert()方法，弹出一个对话框。 <html> <body> <input type="button" value="点我呀！！" onClick="alert('我被点击了')"> </body> </html>

confirm()方法 confirm()方法显示一个带有确认信息及“确定”和“取消”按钮的消息确认对话框。语法：confirm("message")。参数：message 是一个字符串。点击“确定”之后会返回true，点击“取消”之后会返回false。 <html> <body> <script> function confirmTest() { alert(confirm("真的吗?")); } </script> <input type=“button” value=“测试" onClick="confirmTest ()"> </body> </html> 这里我们用alert()方法查看confirm()方法的返回值

确定取消点击

close()方法：关闭指定的窗口 语法：close() （直接使用）参数：无如果是关闭当前的窗口，可以用下列任意一种方法： window.close() 如果是关闭主浏览器窗口，可以使用top.close() self.close() close() 如果是关闭已经打开的页面，可以使用如下的方法用页面打开时返回的ID调用close函数。即页面如果用如下的方式打开： messageWin=window.open("XXX.html") 其中XXX.html为将要打开的页面，其中messageWin为window.open函数返回的ID。那么关闭消息窗口，可以使用： messageWin.close()

open()方法：打开一个WEB浏览器窗口 语法：open(Url, windowName, windowFeatures) 参数说明如表

forward()方法 指向浏览器历史列表中的下一个URL，相当于点击浏览器的“前进”按钮。语法：history.forward() 参数：forward()方法没有参数这个方法等价于浏览器的“前进”按钮 <p><input type="button" value="< Go Forth>" onClick="history.forward()">

back()方法 指向浏览器历史列表中的上一个URL，相当于点击浏览器的“后退”按钮。语法：history.back() 参数：back()方法没有参数这个方法等价于浏览器的“后退”按钮 <input type="button" value="< Go Back >" onClick="history.back()">

文档对象 文档对象在JavaScript中是一个很重要的对象。 links属性 anchors属性常用的文档对象属性包括 forms属性 TITLE属性还有一个重要的方法：write()方法。

links属性 是一个对应于源文件中相应顺序的链接对象构成的数组。如果文档里有三个链接标签即三个<a herf=“...”> ，那么可以使用如下的方法查询它们： document.links[0] document.links[1] document.links[2]

anchors属性 你可以在代码中通过使用anchors数组查询anchor对象，如果你在文档里容纳了三个命名anchor，它们的名字分别为anchor1，anchor2和 anchor3，那么可以使用下面的代码分别查询它们： document.anchors["anchor1"] document.anchors["anchor2"] document.anchors["anchor3"] 或者使用： document.anchors[0] document.anchors[1] document.anchors[2] 如果想要得到文档中anchors的数量，可以使用length属性，即调用：document.anchors.length。

forms属性 如果你在文档里容纳了三个命名forms，它们的属性名分别为form1，form2和form3，那么可以使用下面的代码分别查询它们： document.forms["form1"] document.forms["form2"] document.forms["form3"] 或者用： document.forms[0] document.forms[1] document.forms[2] 如果想查询第二个form中一个名字为quantity的text对象的值，那么你可以使用 document.forms[1].quantity.value

TITLE属性：代表文档标题的一个字符串 TITLE属性体现的是TITLE标签的开始和结束之间的值。如果一个文档没有标题，则它的TITLE属性是null，比如，在下面的例子中TITLE属性的值被保存在变量docTitle中。 var newWindow = window.open("http://www.163.com") var docTitle = newWindow.document.title 以上两行代码中，第一行代码是打开网页，同时返回一个ID保存在变量newWindow中，在第二行代码中用返回的ID调用document.title得到其标题，并将这个标题保存在变量docTitle中。

write()方法 write()方法是文档对象中一个很重要的方法，它是将一个或多个表达式写到指定窗口的文档中。语法：document.write(expr1，...，exprN) 。参数：expr1，...，exprN，这些参数可以是任何JavaScript的表达式 <script> var mystery = "world"; //用write方法输出字符串、字符串变量和数字 document.write("Hello ",mystery," testing ",123); </script><br> <script> //用write方法输出的同时将一个值赋给变量mystr document.write(mystr="Hello ","world..."); document.write(mystr); //输出变量mystr的值 </script><br> <script> var age=16; //如果age>=18成立,则输出Adult,否则输出Minor,并将该字符串赋给newage变量 document.write(newage=(age>=18)?"Adult":"Minor"); document.write(newage); //输出newage变量 </script><br>

框架对象 框架对象：是在同一屏幕上显示多个互不干涉的可滚动框架的窗口。 frames属性：是由源文件中含有Frameset的Frame标签创建的子框架的对象构成的数组。可以通过框架数组来查询窗口中的子框架，如果一个窗口含有三个名字分别为fr1、fr2和fr3的子框架，那么可以用下面的方法查询它们： parent.frames["fr1"] parent.frames["fr2"] parent.frames["fr3"] 或者用： parent.frames[0] parent.frames[1] parent.frames[2] length属性：可以使用窗口的length属性来查询框架中的子框架的数量。

本章总结 • 熟悉JavaScript的窗口对象，包括opener、self、parent、top等。 • 熟悉document、location、history、locationbar、menubar、scrollbars、statusbar、toolbar属性，alert()、confirm()、close()、open()、forward()，back()等方法。 • 理解文档对象中的links、anchors、forms、TITLE属性和write()方法，熟练框架对象中的Frames属性。

第三章

第三章

Presentation Transcript