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

一、window 对象

在浏览器中，window 对象有双重角色，它既是通过 JS 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任意一个对象、变量和函数，都以 window 作为其 Global 对象。

1. 全局作用域：

• 全局变量不能通过 delete 操作符删除，而直接在 window 对象上定义的属性可以。
• 尝试访问未声明的变量会报错，但是通过查询 window 对象，可以知道某个可能未声明的变量是否存在。

2. 窗口关系及框架：

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

• top 对象，始终指向最高（最外）层的框架，也就是浏览器窗口。
• parent 对象，始终指向当前框架的直接上层框架。
• self 对象，始终指向 window 对象。
• top 对象、parent 对象 和 self 对象 都是 window 对象的属性，可以通过 window.parent、window.top、window.self 等形式来访问。

// 访问框架的方法
window.frames[index];
window.frames[name];
top.frames[index];
top.frames[name];
frames[index];
frames[name];

3. 窗口位置：

获取窗口位置的 window 对象的属性：

• window.screenLeft、window.screenTop（IE、Safari、Opera 和 Chrome）
• window.screenX、window.screenY（Firefox）

改变窗口位置的 window 对象的方法：

• window.moveBy() 接收的是在水平和垂直方向上移动的像素数，以右和下为正。
• window.moveTo() 接收的是新位置的 x 和 y 的坐标值。

4. 窗口大小：

获取窗口大小的 window 对象的属性：window.innerWidth、window.innerHeight、window.outerWidth、window.outerHeight

获取窗口大小的 document 对象的属性：document.documentElement.clientWidth、document.documentElement.clientHeight

改变窗口大小的 window 对象的方法：window.resizeBy()、window.resizeTo()

5. 导航和打开窗口：

• window.open()：4个参数为要加载的URL、窗口目标、一个表示窗口特性的字符串 以及 一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
• wroWin.close()：仅适用于通过 window.open() 打开的弹出窗口。
• 新打开的 window 对象有一个 opener 属性，其中保存着打开它的原始窗口对象。

wroWin.opener == window;  // true

6. 间歇调用和超时调用：

• setTimeout(function，interver)、clearTimeout()，setTimeout() 函数中的 this 在非严格模式下指向 window 对象，在严格模式下是 undefined。
• setInterval(function，interver)、clearInterval()，setInterval() 函数中的 this 同上。

7. 系统对话框：

• alert()、confirm()、prompt()
• window.print()、window.find()

二、location 对象

location 对象提供了当前窗口中加载的文档有关的信息，还提供了一些导航功能。它既是 window 对象的属性，也是 document 对象的属性。

1. location 对象的属性：

hash(hash)、host(服务器名称和端口)、hostname(服务器名称)、href(完整URL)、pathname(目录和文件名)、port(端口)、protocol(协议)、search(查询字符串)

2. location 对象的方法：

• location.assign(url)：改变浏览器的位置

       等价于 window.location = url

       等价于 location.href = url

• location.replace()
• location.reload()

三、navigator 对象

navigator 对象提供了与浏览器有关的信息。

1. navigator 对象的属性：

navigator 对象的属性通常用于检测显示网页的浏览器类型。

navigator.plugins、navigator.onLine

2. navigator 对象的方法：navigator.registerContentHandler()、navigator.registerProtocolHandler()

四、screen 对象

screen 对象保存着与客户端显示器有关的信息。

1. screen 对象的属性：screen.availWidth、screen.availHeight、screen.width、screen.height

五、history 对象

history 对象为访问浏览器的历史记录开了一个小缝隙。

1. history 对象的属性：history.length，表示保存的历史记录的数量

2. history 对象的方法：history.go()、history.back()、history.forward()