第六章 窗口和框架

JavaScript程序设计
贾素玲 王强 主编 编著 张剑 曹爽 董亮
6.1
高等学校计算机应用人才培养系列教材
第六章 窗口和框架
6.2
高等学校计算机应用人才培养系列教材
本章结构

JavaScript对象模型 window对象


frame对象
location对象
history对象
高等学校计算机应用人才培养系列教材
6.4
JavaScript对象模型

浏览器对象模型
6.5
高等学校计算机应用人才培养系列教材
JavaScript对象模型

浏览器对象模型中的层次

窗口（window）对象是浏览器对象模型中定义的其他所有对象的 父类。它代表浏览器窗口中显示 HTML页面内容的区域。使用当 前窗口的属性和方法时，并不需要去识别，因为浏览器默认的是 当前窗口。 文档（document）对象代表装载到窗口中的HTML页面。它包含 了其他一些常用的对象，例如form、link、image、layer等。
高等学校计算机应用人才培养系列教材

6.9
window对象

window对象的部分方法

setInterval()：该方法设置一个时间间隔，使程序周期性的重复运 行某段代码，它有两种形式，分别为：setInterval(code,interval) 和setInterval(func,interval,args…)。 clearInterval(intervalID)：这个方法可以停止周期性的执行某段代 码，参数intervalID表示调用setInterval()方法返回的值。 setTimeout(code,delay)：这个方法将延迟代码的执行，参数code 为一个字符串，表示被延迟执行的JavaScript代码；参数delay表 示被延迟的时间，以毫秒计。 clearTimeout(timeoutID) ：这个方法取消对指定代码的延期执行 ，参数 timeoutID 为调用 setTimeout() 方法返回的值，标识了要取 消的延期执行的代码块。
虽然 JavaScript 可以用来操作框架，但是框架却是由 HTML 标记 语言创建，其语法规则如下：
<frameset rows=”percent or pixels” cols=” percent or pixels” [onLoad=”handlecode”] [onUnload=”handlecode”]> <frame src=”URL” name=”frameName”> [<frameset ……> [<frame ……>……..] </frameset>] </frameset>



6.10
高等学校计算机应用人才培养系列教材
frame对象

创建框架

框架是Web浏览器窗口中独立的、可以滚动的分块区域，每个框 架都可以被看成是独立的窗口，包含自己的URL。

浏览器包含一个顶层的 window 对象，而每个框架也都有自己的 window对象，框架的 window对象由浏览器顶层window对象继承 而来。
浏览器对象模型中的每个对象都含有若干属性和方法，使用这些 属性和方法可以操作Web浏览器窗口的不同功能，控制和访问窗 口中框架和HTML页面的不同内容。 浏览器对象模型和浏览器的种类有关，不同浏览器可能包含不同 的浏览器对象及其属性和方法，而且彼此互不兼容。



JavaScript和浏览器对象模型是两个不同的概念，通过JavaScript 并不能影响和改变浏览器对象的核心内容；另外，浏览器对象不 是JavaScript专用的，其他的脚本语言（比如VBScript）也可以使 用浏览器对象。
next：指定了在历史列表中位于当前文档之后的文档的URL。
previous ：指定了在历史列表中位于当前文档之前的文档的 URL。

注意，用户浏览网页的历史信息属于个人隐私，所以对history对 象的使用有严格限制。在Navigator 4中及以后版本中，有署名的 脚本可以访问history对象数组的元素；而在Navigator以前版本以 及Internet Explorer中，history对象数组的元素是无法访问的。
高等学校计算机应用人才培养系列教材

6.8
window对象

window对象的部分方法

alert(message)：该方法可以显示一个简单的信息对话框，带有一 个确定（OK）按钮，参数message为要在对话框中显示的信息。 confirm(question) ：该方法可以显示一个确定对话框，带有确定 （OK）和取消（Cancel）按钮，参数question为要在对话框中显 示的信息。


表单（form）对象由许多其他重要的对象组成，例如text、button 、radio、checkbox、select等，这些对象通常在Web页面中使用， 是用户和页面动态交互的关键。
浏览器对象的值可以通过浏览器对象模型层次来获得，即使用 JavaScript，按照从顶层到底层的路径顺序，便可以设置或者访问 某个属性的值。
objectName.propertyName objectName表示对象名称，propertyName表示该对象的属性名称。

方法是浏览器对象的固有函数，用来对特定对象执行某个操作。 每个对象都有自己的方法集，方法的访问语法如下：

objectName.methodName(parameterList) objectName 为包含所调用代码的对象名称， methodName 为调用方法 ，parameterList为该方法的参数清单。


6.13
高等学校计算机应用人才培养系列教材
location对象

location对象的属性

hash：这个属性表示了URL应用的对象中的锚的名字。 host：这个属性表示了URL中的主机名和端口号的组合。 hostname：这个属性表示了URL中的主机名。 href：这个属性表示了完整的URL地址。 pathname：这个属性表示了URL中的路径部分。 port：这个属性表示了URL中的端口部分。 protocol：这个属性表示了URL中的协议部分。 search：这个属性表示了URL中的查询部分。
高等学校计算机应用人才培养系列教材
6.16
history对象

history对象的方法

back() ：这个方法可以使浏览器向后转移到以前已经访问过的 URL，该方法的执行效果等同于在浏览器上点击“后退”按钮。

forward()：这个方法可以使浏览器向前转移到以前已经访问过的 URL，该方法的执行效果等同于在浏览器上点击“前进”按钮。



history：对 history对象的引用，表示用户浏览器窗口的历史信息 。
location：对locaton对象的引用，改变这个属性将导致浏览器加载 一个新的文档。


parent ：如果当前的窗口是一个框架，那么该属性就是对窗口中 包含这个框架的框架的引用。
screen：该属性是对screen对象的引用。

6.11
高等学校计算机应用人才培养系列教材
frame对象

frame对象的属性和方法

尽管被称为frame对象，但是它是由HTML标记语言创建，所以严 格说来，在JavaScript中这种对象是不存在的。 如果一个浏览器窗口包含了若干个框架，那么每个框架不过是 window对象的一个实例，它们具有的属性、支持的方法和事件处 理器都与window对象相同。 不 过 ， 在 表 示 顶 层 浏 览 器 窗 口 的 window 对 象 与 表 示 框 架 的 window对象之间，还存tion对象

概述

location对象用来表示浏览器窗口中加载的当前文档的URL，该对 象的属性说明了URL中的各个部分。

一旦location对象的属性发生变化，就相当于生成了一个新的URL ，浏览器便会尝试打开新的URL。
虽然可以通过改变location对象的任何属性加载新的页面，但是一 般不建议这么做，正确的方法是修改location对象的herf属性，将 其设置为一个完整URL地址，从而实现加载新页面的功能。 location对象和 document对象的 location属性是不同的， document 对象的 location 属性是一个只读字符串，不具备 location 对象的任 何特性，所以也不能通过修改document对象的location属性实现重 新加载页面的功能。


prompt()：该方法显示一个对话框，提示用户输入信息。
open(url,name,features,replace) ：该方法用于打开一个新窗口。 url 指定了要在新窗口中显示的文档的URL ； name 指定了新窗口 的 名 字； features 指定 了新 窗口 要显示 的标 准浏览 器的 特性； replace指定是要在窗口的浏览历史中给装载的新页面的url创建一 个新条目，还是用它替换掉浏览历史中的当前条目。
6.14
高等学校计算机应用人才培养系列教材
location对象

location对象的方法

reload([force])：该方法从缓存或者服务器中再次把当前文档加载 进来。force是一个布尔型的参数，如果将其设置为 true，那么就 使当前页面无条件的从所处的服务器上重新加载；如果将参数设 置为false，或者忽略该参数，那么只有当从上次加载完毕后，文 档被改变时才会重新加载。 replace(url)：该方法用一个新的文档替换当前的文档。调用该方 法，将用该方法中参数指定的URL替换当前浏览器中的文档，而 不是在历史列表中创建一个新的条目。 如果使用 replace() 方法加载一个新的页面后，浏览器的“后退” 按钮将无法返回到原来的页面，而通过改变location对象的属性来 加载一个新的页面时便可以做到这一点。