第14章 BOM

第14章　BOM

前面各章重点讲解了JavaScript核心部分内容，从本章开始将转向Web浏览器中JavaScript的学习，这部分通常称为客户端JavaScript。在网页设计中，BOM非常重要，它为JavaScript代码定义了特定的上下文，提供了一个可以运行JavaScript的环境。本章将介绍BOM相关的基本概念，以及包含的主要对象。

【学习重点】

▲　了解BOM

▲　使用Window对象

▲　使用Document对象

▲　使用JavaScript控制客户端

▲　使用JavaScript定位和导航

14.1　认识BOM

BOM是Browser Object Model的缩写，简称浏览器对象模型。BOM提供了独立于内容而与浏览器窗口进行交互的对象，由于BOM主要用于管理窗口与窗口之间的通信，因此其核心对象是Window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

提示：BOM缺乏标准，JavaScript的标准化组织是ECMA，DOM的标准化组织是W3C，而BOM至今还没有组织对其进行标准化。

JavaScript是一门寄生语言，只有寄宿在具体的环境中才能够使用。前面各章内容主要讲解了JavaScript语言核心模块，从本章开始用户将进入客户端，讲解JavaScript在Web浏览器中的使用（通常也被称为客户端JavaScript）。要理解客户端JavaScript，用户必须深入理解Web浏览器的程序设计环境。

Window对象是客户端JavaScript中第一类对象，其他所有对象都是它的子对象。例如，每个Window对象都包含一个document属性，该属性引用与这个窗口关联在一起的Document对象，location属性引用与该窗口关联在一起的Location对象。浏览器核心对象说明如表14-1所示。

表14-1　客户端浏览器对象

在客户端JavaScript中，所有对象都是作为Window对象的属性进行引用的。也就是说，对象之间存在一种结构层次关系。在这个结构模型中，Window对象代表根节点（如图14-1所示）。理解它们的层次结构及相互包含关系，才能够正确引用它们，并顺利设计各种应用程序。

图14-1　浏览器对象模型

Window对象作为全局对象，通过属性引用其他子对象，这些子对象定义了大量的方法和属性，并分别负责特定的客户端任务，灵活应用这些对象的方法和属性是应用开发的基础。除了Window对象及其子对象外，客户端JavaScript中的Document对象还包含了大量的文档元素对象，这些元素对象及上述各大主要对象共同构成了客户端浏览器对象基础，简称为浏览器对象模型（Browser Object Model，BOM）。

DOM被W3C规范化，但是BOM还没有被规范，不过BOM的大多数重要特性都被所有浏览器支持，所以用户不用担心BOM的兼容性问题。

14.2　使用Window对象

Window对象是客户端JavaScript的全局对象，客户端JavaScript程序正是在Window对象提供的全局域空间中运行的。它还是客户端浏览器对象模型的基类（即客户端第一类），也有人称之为BOM的根节点，与DOM中的html元素的根节点地位类似。一个Window对象实际上就是一个独立的浏览器窗口，如果对于框架性页面来说，窗口中每个框架都包含一个Window对象。Window对象定义的属性和方法如表14-2和表14-3所示。

表14-2　Window对象属性列表

表14-3　Window对象方法列表

14.2.1　全局作用域

在客户端浏览器中，Window作为全局对象，也称为第一类对象。所有客户端JavaScript代码都将在全局环境中运行。作为全局运行环境，Window对象提供了全局作用域。

实际上，Window对象代表的是一个浏览器窗口或者窗口中的一个框架。在客户端JavaScript中，顶层窗口和框架本质上是等价的。Web应用程序中每个浏览器窗口和网页框架都对应一个Window对象，而且都为客户端JavaScript代码定义了一个唯一的执行环境。通俗地说，JavaScript代码在一个框架中声明的全局变量并不是另一个框架的全局变量，但是第二个框架却可以存取第一个框架中的变量。

在客户端JavaScript中，Window对象定义了大量的属性和方法，方便对Web浏览器的窗口进行操作。同时它还定义了引用其他对象的属性。例如，引用Document对象的document属性，引用自身的window和self属性等。

由于Window对象是全局对象，因此所有的全局变量都被定义为该对象的属性。例如，当用户在脚本中自定义一个变量或函数时，实际上它们自动就成为了Window对象的一个属性或方法。

14.2.2　Window对象生命周期

在客户端JavaScript中，与一般对象不同，Window对象存在于浏览器当前进程中。如果当前浏览器进程没有被终止，则该Window依然会存在。这样在当前进程中，即使打开一个窗口，然后关闭，则该窗口的Window对象依然存储在内存中，除非这个浏览器进程完全被终止。

【示例】在本示例中，新建一个窗口，然后再关闭，则在原窗口中探测已关闭窗口的Window是否存在。则在IE和Firefox浏览器中因为几个窗口同为一个进程，所以不管是否关闭，都会检测到新开窗口的Window，而对于Opera和Chrome浏览器来说，由于每新开一个窗口，都会新建一个进程，所以用户会看到新开的窗口被关闭后，原窗口中就不会检测到新建的Window了。

14.2.3　人机交互接口

Window对象定义了以下3个专用人机交互的方法。

☑　alert()：简单的提示对话框，由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。如果没有指定参数，则弹出一个空的对话框。

☑　confirm()：简单的提示对话框，由浏览器向用户弹出提示性信息，不过该方法弹出的对话框中包含两个按钮，分别表示“确定”和“取消”，如果单击“确定”按钮，则该方法将返回true；而单击“取消”按钮，则返回false。confirm()方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个空的对话框。

☑　prompt()：弹出提示对话框，可以接收用户输入的信息，并把用户输入的信息返回。prompt()方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个没有提示信息的输入文本对话框。

【示例1】本示例演示了如何综合调用这3个方法来设计一个人机交互的对话：

这3个方法接收信息为纯文本的字符串，而不是HTML格式的文本。用户只能够使用空格、换行符和各种符号来格式化提示对话框中的显示文本。不过不同浏览器对于这3个对话框的显示效果略有不同。

【示例2】用户也可以扩展这些方法，设计的思路是：重写方法，并通过DHTML方式在客户端输出一段HTML片段，然后使用CSS修饰对话框的显示样式，借助JavaScript来设计对话框的行为和交互效果。下面是一个简单的设计思路，没有附加CSS样式和JavaScript行为控制：