BOM 也就是浏览器对象，和网页无关而是和浏览器相关。

1. window 对象

js 中的 window 对象有两种功能：其中一个是 global 对象，另一个则为浏览器窗口的接口。

1.1 global 对象

es 标准中的 global 对象，作为 window 的一部分被实现。所有通过var声明的全局变量，函数其实都是 window 对象的属性，方法。

1.2 窗口

1.2.1 窗口位置

在很多浏览器中被禁用。

moveTo(x, y): 将窗口移动到绝对位置 (x, y)
moveBy(x, y): 将窗口以相对现在的位置分别移动 x 和 y 个像素。

1.2.2 像素比

window.devicePixelRatio，实际设备的物理像素和css像素大小之比。

1.2.3 窗口大小

所有浏览器的 window 对象都有以下四个属性：innerWidth, innerHeight, outerWidth, outerHeight。

inner 表示页面视口的大小，包括滚动条，但不包括工具栏和浏览器边框。
outer 表示整个窗口的大小，包括工具栏和浏览器边框。除此之外，document.documentElement.clientWidth/clientHeight 也是页面视口的大小，但是和 inner 不一样的是，该属性不包括滚动条。

1.2.4 调整窗口大小

和调整窗口位置一样，在很多浏览器中被禁用。
resizeTo() 和 resizeBy()

1.2.5 视口位置

在回到顶部功能中常用的函数。
scrollTo() 和 scrollBy()。一个是绝对位置，一个是相对现在位置。

1.2.6 导航

window.open(url, target) 可以在指定窗口打开指定的 url。第二个参数为窗口的名字，如果没有叫这个名字的窗口，则会新建一个窗口并打开该 url。
window.open() 返回一个 window 对象表示新的窗口，可以调用该对象的 .close() 方法将其关闭。（只有通过 window.open() 方法打开的窗口才能通过此种方法关闭）

1.2.7 setTimeout 和 setInterval

具体查看我自己的前端学习笔记（四）

1.2.8 系统对话框

系统对话框会中止代码的运行。

alert()，弹出消息，用户只能告诉了解信息。
confirm()，弹出消息，用户可以选择确认和取消。对应的，confirm() 方法会返回 true 和 false。
prompt()，弹出消息，用户可以输入信息。用户输入后点击确认，则会返回输入的值，即使不输入也会返回 ""。如果用户点击取消，则返回 null。

下面两种对话框则是异步运行，不会中止代码的运行。

print() 方法，打开打印页面，相当于 ctrl+p。
find() 方法，搜索页面上的内容。

2. location 对象

BOM 对象之一。
location 对象既是 window 对象的属性，也是 document 对象的属性。
location 对象包含着当前加载文档的信息，以及解析后的 url 片段信息。
如 location.port, location.href, location.host, location.hostname 等等

2.1 修改地址

可以通过修改 loaction 的地址来导航。
示例：

// 最基础的方法
location.assign("http://www.oyishyi.top");

// 直接改变也可以，虽然其实内部也是调用 assign
location.href = "http://www.oyishyi.top";
location = "http://www.oyishyi.top";

除了直接设置 href，改变 pathname，port，hash，search 等也会改变网址，导致重新加载 url。
改变 url 会产生历史记录，如果不想产生历史记录，则可以使用 replace 代替 assign。

2.2 重新加载页面

还有 reload 方法，可以重新加载页面。

location.reload(); // 如果有缓存则使用缓存
location.reload(true); // 强制请求新资源

3. navigator 对象

有很多属性和方法，要用的时候查去。这些属性通常用于确定浏览器类型等等。比如浏览器厂商名字，常用语言，产品信息，是否开启java，触摸屏最大触点，设备内存等等。

3.1 geolocation API

获取设备的地理坐标。经纬度，海拔高度，速度，等等。浏览器会通过各种能用的手段获取坐标，不一定是设备自己的 GPS。

3.2 网络连接状态，NetworkInformation API

3.2.1 网络连接状态

3.2.1.1 事件

window 上有 online 和 offline 事件。

window.addEventListener("online", xxx);
window.addEventListener("offline", xxx);

3.2.1.2 属性

navigator 提供了 onLine 属性（注意 L 大写）。联网时返回 true，反则 false。

3.2.2 NetworkInformation API

js 中实现为 navigator.connection 属性。该属性提供了一些只读属性，并包含一个 onchange 事件，该事件在网络状态发生变化时触发。

navigator.connection.addEventListener("change", xxx);

3.3 Battery Status API

顾名思义，访问设备电池信息。

// getBattery() 返回一个期约，解决为一个 BatteryManager 对象
navigator.getBattery().then((bm) => console.log(bm));

该对象提供了多种属性和方法，具体要用的时候查看红宝书 p399 即可。

3.4 硬件信息

之前也提到过，navigator 的属性中有几项和设备硬件相关。

处理器核心数（不准确）。navigator.hardwareConcurrency 属性。返回的实际上是浏览器最大可以并行的线程数量，并不一定和 cpu 个数相同。
设备内存大小（非常不准确）。navigator.deviceMemory 属性。单位是 GB。但是之能是 0.25, 0.5, 1, 2, 4, 8 这几个之一。不仅仅是不准确，甚至超过 8GB 的设备都只会返回 8。
最大触点数。navigator.maxTouchPoints 属性。返回触摸屏支持的最大触点。

4. screen 对象

用的不多，获取客户端显示器的各个属性。

5. history 对象

记录该窗口的导航记录。不过出于安全问题，不能通过这个对象获取用户的 url 记录。但是用于前进和后退是可以的。

5.1 导航

通过 go() 方法前进和后退。

history.go(-1); // 后退一页
history.go(-2); // 后退两页

history.go(1)；// 前进一页

或者用 forward() 和 back() 代替。

history 有一个 length 属性，代表访问过的历史记录的条数。可以通过 history.length 是否等于 1，来判断该页面是否为起点页面。

5.2 历史状态管理

状态管理 API 可以改变 url 但不刷新页面。对单页应用很有用。不过各种前端框架已经为我们处理好了。

前端学习笔记（三十一）--BOM对象