javascript 高级程序设计笔记（第八章 BOM）

第8章 BOM（浏览器对象模型）

BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

8.1 window对象（浏览器的一个实例）

在浏览器中，windows对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个 接口，又是ECMAScript规定的Global对象。

8.1.1 全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

注意：
1. 定义全局变量与在window对象上直接定义属性的差别：全局变量不能通过delete操作符删除，而直接在windows对象上定义的属性可以。
原因：通过var添加的window属性有一个名为[[configurable]]的特性，这个特性的值被设置为false，因此这样定义的属性不可以通过delete操作符删除。
2. 尝试访问未声明的变量会抛出错误，但是通过查询windows对象，可以知道某个可能未声明的变量是否存在
3. windows mobile平台的IE浏览器不允许通过 windows.property = value之类的形式，直接在windows对象上创建新的属性或方法。可是，在全局作用域中声明的所有变量和函数，照样会变成windows对象的成员。

8.1.2 窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的windows对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架名称（name属性）来访问响应的windows对象。

---

• 正因如此：
  可以通过top对象访问框架，而不要用windows，如top.frame[0].top始终指向最高（最外）层框架，也就是浏览器窗口。

---

• parent：在某些情况下，parent有可能等于top；但在没有框架的情况下，parent一定等于top。

---

注意：除非最高层窗口是通过window.open()打开的，否则其window对象的name属性不会包含任何值。？？？

---

• self：它始终指向window；实际上，self和window对象可以互换使用。
  引入它的目的：是为了与top和parent对象对应起来，因此它不格外包含其他值。

---

由于每个window对象都包含原生类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等。

8.1.3 窗口位置（存在兼容性问题）

一、窗口相对于屏幕左边和上边的位置。
1、screenLeft 和screenTop属性

支持浏览器：IE、Safari、Opera、Chrome

2、screenX和 screenY属性：作用同上

支持浏览器：Firefox、Safari、Chrome

---

使用下列代码可以跨浏览器取得窗口左边和上边的位置
var leftPos = (typeOf window.screenLeft == "number")? window.screenLeft : window.screenX;
var topPos = (typeOf window.screenTop =="number")?window.screenTop:window.screenY;

---

注意：
1. IE、Opera中该属性保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。
2. Chrome、Firefox、Safari中，响应属性保存的是整个浏览器窗口相对于屏幕的坐标值。
3. Chrome、Firefox、Safari 即使在页面由于被设置了外边距而发生偏移的情况下，相对于window对象使用相应属性每次都会返回相同的值。可以试试top对象？？？
而IE和Opera则会给出框架相对于屏幕边界的精确坐标值

结论：无法再跨浏览器的条件下取得窗口左边和上边的精确坐标值。

二、将窗口精确地移动到一个新位置
1、 moveTo
2、 moveBy

这两个方法可能会被浏览器禁用；而且在Opera和IE7中默认就是禁用的。
这两个方法不适用于框架，只能对最外层的window对象使用。

8.1.4 窗口大小

一、
1、outerWidth 和 outerHeight：返回浏览器窗口本身的尺寸

使用浏览器：IE9+、Safari和Firefox
特例：在Opera中，这两个属性的值表示页面视图容器（单个标签页对应的浏览器窗口）的大小

2、innerWidth 和 innerHeight ：表示该容器中页面视图区的大小（减去边框宽度）

特例：Chrome中，这四个属性中的对应部分返回相同值，即视口大小而非浏览器窗口大小。
特例：IE更早的版本没有取得浏览器窗口尺寸的属性，但通过DOM提供了页面可见区域的相关信息。

3、document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息

注：在IE6中，这些属性必须在标准模式下才有效，如果是混杂模式，就必须通过document.body.clientWidth document.body.clientHeight取得相同信息。

---

结论：虽然无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小。

注：
1. 对于移动设备，window.innerWidth window.innerHeight保存着可见视口，也就是屏幕上可见页面区域的大小。
2. IE不支持上两个属性，但通过document.documentElement.clientWidth document.documentElementHeight提供相同属性
3. 布局视口？？？

二、调整浏览器窗口的大小：
1、resizeTo(（）
2、resizeBy（）

注意：与move相同

8.1.5 导航和打开窗口

一、导航——window.open（）
1、作用：导航到一个特定的URL，也可以打开一个新的浏览器窗口。
2、参数：接收4个参数——要加载的URL、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

注：
* 一般只用第一个参数，最后一个只在不打开新窗口的情况下使用。
* 第二个参数是打开URL的目的窗口，也可以是特殊窗口：_self、_parent、_top、_blank
* 第三个参数：当第二个参数不是一个已经存在的窗口或框架，在创建新窗口时，用于设置相应参数（如宽、高、位置、大小是否可变等）

window.open（）方法会返回一个指向新窗口的引用

二、关闭——.close（）只适用于通过window.open（）打开的弹出窗口

弹出窗口可以调用top.close（）在不经用户允许的情况下关闭自己。弹出窗口关闭之后，窗口的引用仍然还在。

三、
新建的window对象有一个opener属性，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层window对象中有定义，而且指向调用window.open（）的窗口或框架。

注：虽然弹出窗口中有一个指针指向打开它的原始窗口，但原始窗口中并没有这样的指针指向弹出窗口。窗口并不跟踪记录它们代开的弹出窗口，因此我们只能在必要的时候自己来动手实现跟踪。
注：有些浏览器（IE和Chrome）会在独立的进程中运行每个标签页。

四、安全限制：阻止弹窗
五、弹出窗口屏蔽程序
1、在弹出窗口被屏蔽时，就应该考虑两种可能
（1）浏览器内置有弹出窗口屏蔽程序（window.open()返回null）
（2）带有内置屏蔽程序的实用工具。（window.open()抛出错误）

8.1.6 间歇调用和超时调用

1、超时值：在指定的时间过后执行代码

window对象的setTimeout()方法
（1）参数：两个——要执行的代码（可以是包含js代码的字符串，也可以是一个函数）、以毫秒表示的时间
（2）注：不建议以字符串作为第一个参数，可能导致性能损失
（3）注意：经过指定时间后代码不一定会执行。js是一个单线程程序的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个js任务队列。这些任务会按照将它们添加到队列的顺序执行。
（4）该方法会返回一个数值ID，表示超时调用，可以通过它来取消超时调用。但是，没有必要追踪
（5）注：超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向window对象，在严格模式下是undefined

2、间歇时间：每隔指定的时间执行一次代码

取消间歇调用的重要性远远高于取消超时调用
一般认为，使用超时调用来模拟间歇调用是一种最佳模式。

8.1.7 系统对话框

一、调用系统对话框向用户显示消息
1、alert（）
2、confirm（）
3、prompt（）：单击OK，返回文本输入域的值

• 外观由操作系统及浏览器设置决定
• 是同步和模态的：也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。

二、异步的
1、window.print( )：打印
2、window.find（）：查找

8.2 location对象

功能：
* 提供了与当前窗口中加载的文档有关的信息
* 提供了一些导航功能

特性：它既是window对象的属性，也是document对象的属性

属性名	说明
hash	返回URL中的hash（#号后跟零或多个字符），如果不包含，则返回空
host	返回服务器名称和端口号
href	返回当前加载页面的完整URL。而location对象的tostring（）方法也返回这个值
pathname	返回URL中的目录和文件名
port	返回URL中指定的端口号
protocol	返回页面使用的协议
search	返回URL的查询字符串，以文号开头

8.2.1 查询字符串参数

8.2.2 位置操作

一、assign(” url “):立即打开新URL并在浏览器的历史记录中生成一条记录。

如果将location.href()或window.location设置为一个URL值，也会以该值调用assign（）

二、修改location对象的其他属性也可以改变当前加载的页面

三、replace（“url”）：结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。

四、reload（）：作用是当新加载当前显示的页面。如果调用reload（）时不传递任何参数，也就是说页面自上次请求依赖并没有改变过，页面就会从浏览器缓存中重新加载。

注：位于reload（）调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。为此，最好将reload（）放在代码的最后一行。

8.3 navigator对象

一些属性和方法（p210），用于检测显示网页的浏览器类型

8.3.1 检测插件

对于非IE浏览器，可以使用plugins数组来达到这个目的。该数组中的每一项都包含下列属性：

name : 插件的名字；
description ： 插件的描述
filename ： 插件的文件名；
length ： 插件所处理的MIME类型数量 ？？？

每个插件对象本身也是一个MimeType对象的数组

在IE中检测插件的唯一方式就是使用专有的ActiveXObject类型，并尝试创建一个特定插件的实例。

8.3.2 注册处理程序

注册处理程序就像使用桌面应用程序一样为这些在线应用程序提供了一种方式。

firefox 2 为navigator对象新增了registerContentHandler() registerProtocolHandler().它们都接收三个参数，第一个（要处理的MIME类型/要处理的协议），第二个可以处理的页面的URL，应用程序的名称

8.4 screen对象

该对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息。这些信息经常集中出现在测定客户端能力的站点跟踪工具中，但通常不会用于影响功能。不过有时候，也可能会用到其中的信息来调整浏览器窗口大小，使其占据屏幕的可用空间。？

8.5 history对象

保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为history是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
1、go（）方法：在用户的历史记录中任意跳转
（1）一个整数
（2）一个字符串
2、两个简写方法back（）和forward（）