什么是 BOM？

BOM 是 browser object model 的缩写，中文意思是浏览器对象模型，提供了一系列操作浏览器的 API。与 ECMAScript 和 DOM 共同组成了 JavaScript。

在 Web 早期，BOM 没有标准规范，完全是由不同的浏览器厂商来实现的，所以不同的浏览器之间可能会存在差异。在 HTML5 规范中加入了 BOM 规范，弥补了这个问题。

BOM 能做什么？

打开新的标签页。

<button id="btn">打开百度首页</button>
<script>
  const btn = document.getElementById("btn");
  btn.addEventListener("click", () => window.open("https://www.baidu.com"));
</script>

关闭当前标签页。

<button id="btn">关闭页面</button>
<script>
  const btn = document.getElementById('btn')
  btn.addEventListener('click', () => window.close())
</script>

弹出新的浏览器窗口。

移动窗口。

缩放窗口。

控制用户浏览记录。

获取浏览器详细信息。

获取用户显示器分辨率详细信息。

其他更多功能。

BOM 包含什么？

JavaScript 最初是为 Web 浏览器创建的，但是后来它发展成了多用途和多平台的语言。任何能够提供 JavaScript 运行时的平台都可以称为 JavaScript 主机环境（host）。

目前主流的 JavaScript 平台有 Web 浏览器和可以运行服务端的 Node.js。

任何平台都需要有一个全局对象(Global)/根对象(Root)/宿主对象(Host)，用于扩展除了 ECMAScript 语言自身的对象和函数外自己提供的对象和函数。

浏览器环境下的全局对象是 window，它扩展了 DOM 和 BOM。

window 除了具有全局对象含意外，还拥有另一个含意，是“浏览器窗口”。

它的组成如下：

从图中可以看到，BOM 主要包含了 Navigator、Screen、Location、Frames、History 和 XMLHttpRequest 6 个对象。下面逐个讲述它们的用途。

Navigator

Navigator 对象记录了访问者信息。

获取常用属性的示例代码如下：

<div id="info"></div>
<script>
  const info = document.getElementById("info")
  info.innerHTML += `浏览器应用程序名称: ${navigator.appName} </br>`
  info.innerHTML += `浏览器应用程序代码: ${navigator.appCodeName} </br>`
  info.innerHTML += `浏览器引擎: ${navigator.product} </br>`
  info.innerHTML += `浏览器版本: ${navigator.appVersion} </br>`
  info.innerHTML += `浏览器代理: ${navigator.userAgent} </br>`
  info.innerHTML += `浏览器平台: ${navigator.platform} </br>`
  info.innerHTML += `浏览器语言: ${navigator.language} </br>`
  info.innerHTML += `浏览器是否在线: ${navigator.onLine} </br>`
  info.innerHTML += `是否启用 cookie: ${navigator.cookieEnabled} </br>`
  info.innerHTML += `处理器核心数: ${navigator.hardwareConcurrency} </br>`
</script>

属性

Navigator 对象的所有属性都不保证返回值是正确的，因为：

不同浏览器能够使用相同名称 导航数据可被浏览器拥有者更改 某些浏览器会错误标识自身以绕过站点测试 浏览器无法报告发布晚于浏览器的新操作系统

但也不需要过度担心，因为常规用户是不会随意操作这些属性的。

Navigator 上面的属性几乎全部都是只读的。即使你更改了属性的值，也不会有任何作用，当然也不会报错。

navigator.appCodeName = ""
console.log(navigator.appCodeName) // "Mozilla"

其实 navigator 上的大多数属性都是为了兼容老旧的程序，基本上没有什么实际意义。

比如 appName，它的值只有两个，Netscape（网景） 和 Microsoft Internet Explorer（微软 IE）。其中只有低于 11 版本的 IE 浏览器返回 Microsoft Internet Explorer，其他浏览器都是 Netscape。

比较常用的两个属性是 userAgent 和 onLine。

区分移动设备机型：userAgent

userAgent 可以用来识别不同的平台和浏览器。但是由于用户可以修改这个字符串，各类终端设备的不同等原因，用这个属性来识别浏览器不是个好方法，但它可以大致准确的识别出移动设备的机型。如果自己来处理 userAgent 字符串，需要用到大量正则表达式，而且容易出错，总之是一个非常麻烦的过程。比较推荐解析库 ua-parser-js。

它只需要两行代码就可以获取到完整的用户代理信息。

var parser = new UAParser();
console.log(parser.getResult());

监听设备在线离线状态：onLine 的用途

window 提供了 online(上线) 和 offline(离线) 两个事件，可以通过监听这两个事件，并配合 onLine 属性进行判断设备是否离线。

window.addEventListener('online',  printNetworkState);
window.addEventListener('offline', printNetworkState);
function printNetworkState() {
  console.log(navigator.onLine ? "您的网络恢复了" : "您的网络断开了");
}

调试网络状态可以在浏览器的控制台中选择 Network 面板，点击 WIFI 图标。

这样就进入了 Network conditions 面板，点击 Network throttling，可以选择不同的网络状态。

除了上述的属性外，还有几个属性是在 HTML5 中新添加的，在移动开发中比较有实用价值，比如 getBattery（电池状态）、connection（网络连接状态）和 geolocation（地理位置信息）等。

电池状态：getBattery

该 API 可以获取电池状态，从而做一些你想做的事情，比如在电量较低时减少资源消耗，在电量将要耗尽时存储数据，防止数据丢失等。

getBattery 会返回一个 BatteryManager 对象。

属性

事件

示例：

navigator.getBattery().then(function(battery) {
  function updateAllBatteryInfo(){
    updateChargeInfo();
    updateLevelInfo();
    updateChargingInfo();
    updateDischargingInfo();
  }
  updateAllBatteryInfo();
  battery.addEventListener('chargingchange', updateChargeInfo);
  function updateChargeInfo(){
    console.log(`Battery charging? ${battery.charging ? "Yes" : "No"}`);
  }
  battery.addEventListener('levelchange', updateLevelInfo);
  function updateLevelInfo(){
    console.log(`Battery level: ${battery.level * 100}%`);
  }
  battery.addEventListener('chargingtimechange', updateChargingInfo);
  function updateChargingInfo(){
    console.log(`Battery charging time: ${battery.chargingTime} seconds`);
  }
  battery.addEventListener('dischargingtimechange', updateDischargingInfo);
  function updateDischargingInfo(){
    console.log(`Battery discharging time: ${battery.dischargingTime} seconds`);
  }
});

下面是两个在 codepen上面的示例。

充电 Demo 1

充电 Demo 2

网络状态：connection

connection 可以获取系统网络状态，来通过判断网络是蜂窝网还是 WiFi 来提醒用户流量的损耗。还可以通过区分 3G/4G/5G 来提供不同质量的内容。相比于 onLoad 属性，connection 拥有更细粒度的网络状态监控。

示例：

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
function printConnectionStatus(e) {
  console.log(e.target);
}
connection.addEventListener('change', printConnectionStatus);

e.target 是当前的网络状态对象， 它包含如下几个属性。

地理位置：geolocation

这个 API 只能在 https 协议下才可以使用，它可以获取地理位置。

但这个 API 的位置偏移较为严重，容易产生定位不精准的问题。

示例：

const options = {
  enableHighAccuracy: true,// 高精确度
  timeout: 5 * 1000,// 等待响应的最长时间 单位：毫秒
  maximumAge: 0// 应用程序愿意接受的缓存位置的最长时间
}
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(console.log, console.log, options)
} else {
  console.log('Geolocation is not supported in your browser')
}

在任意一个 https 协议的网页控制台中运行上面这段脚本，会在左上角弹出一个地址授权提示框。

点击允许就完成了授权，这时右侧就会出现一个地址的图标。

如果浏览器自身没有访问位置的权限，需要在操作系统设置中对其授权，比如在 Mac 系统下。

完成授权后可以获得一个 GeolocationPosition 对象，这个对象的 coords 属性记录了当前位置信息。

最重要的是经纬度，比如我的：

makefile

复制代码

latitude: 22.3193039longitude: 114.16936109999999

现在可以在高德开放平台使用坐标拾取器查询具体的位置了。

输入经纬度，格式是经度加英文逗号加维度。

像高德地图、百度地图、腾讯地图这类地图厂商的 H5 SDK 都是使用这个 API 来完成的。

摄像头和麦克风：WebRTC

上述的几个 API 都是实验性的，通常多用于移动端。

除此之外，还有 WebRTC 技术中需要用到的摄像头/麦克风等功能也属于 Navigator 的范畴。

WebRTC 是 Web Real-Time Communication 的缩写，直译为 Web 实时沟通，通常用于视频聊天、语音聊天之类的场景。

但 WebRTC 的内容相对较多，不在这节课中详述，下面是一个 Demo，有兴趣可以自行学习。

WebRTC Demo

Screen

screen 表示当前窗口所在的屏幕，提供了显示设备的信息。

相比较 Navigator 而言，Screen 则简单很多。

它提供了如下属性：

Screen 最常见的用途是根据用户设备的不同，提供不同的资源。

比如根据不同分辨率提供两套 html：

if (screen.width > 1920 && screen.height > 1080) {
  location.replace('max.html')
} else if (screen.width < 1280 && screen.height < 720) {
  location.replace('min.html')
}

Location

记录当前 URL 信息，并提供了一系列对当前 URL 的操作方法。

属性

这些属性中只有 origin 为只读属性，其它属性均为可写。

当你一旦修改了 location 的属性，页面会立即发生变化。比如你修改了 href，页面会立即触发跳转。

跳转锚点

最常用的用法是通过设置 hash，让页面自动滚动到对应的锚点位置。

只要设置过 id 的元素，都可以称为锚点（anchor）。

示例（2 秒后自动跳转到锚点 d3 的位置）：

<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
<div id="d4">4</div>
<div id="d5">5</div>
<div id="d6">6</div>
<style>
  [id^="d"] {
    height: 400px;
    text-align: center;
    line-height: 400px;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
  }
  #d1 {
    background: #d9e3f0;
  }
  #d2 {
    background: #f47373;
  }
  #d3 {
    background: #697689;
  }
  #d4 {
    background: #37d67a;
  }
  #d5 {
    background: #2ccce4;
  }
  #d6 {
    background: #555555;
  }
</style>
<script>
  setTimeout(() => {
    location.href = "#d3";
  }, 2000);
</script>

方法

跳转页面 assign

location.assign('http://www.baidu.com')

如果参数不是一个合法的 URL，不会跳转页面，而是会抛出异常。

替换当前页面 replace

location.replace('http://www.baidu.com')

replace 和 assign 的区别在于，replace 不会存储上一个页面浏览历史，而是用新的 URL 替换掉老的 URL，也就是说意味着页面无法再回退。

重新加载页面 reload

location.reload()

reload 的作用等价于点击浏览器的刷新按钮。

reload 可以传递一个 boolean 类型的参数。

当设置为 true 时会强制从服务器重新请求资源。如果设置为 false，会使用浏览器缓存。默认为 false。

转换为字符串 toString

等同于 location.href。

URL 和 URLSearchParams 对象

一个 URL 可以包含如下几个部分。

• href：完整的 URL。
• protocol：协议，以 : 结尾。常见的有 http 和 https。
• hostname：域名，和协议以 // 分割，和端口以 : 分割。
• port：端口，通常会省略掉，默认为 80。
• pathname：路径，表示网站中的某个资源。
• search：查询参数，以 ? 开头，彼此之间以 & 拼接。
• hash：锚点，以 # 开头。

BOM 提供了 URL 和 URL SearchParams 对象来帮助我们更容易地操作 URL。

虽然大多数情况下我们只需要使用字符串类型的 URL 就足够了，但在某些时候 URL 对象非常有用。

创建 URL 对象

需要使用 new 关键字创建，它有两个参数，第一个是 url，或者是一个路径，必选；第二个是基础路径，可选。

比如百度的URL：

new URL('https://www.baidu.com')

加上 base 的情况：

new URL('/s?ie=UTF-8&wd=url', 'https://www.baidu.com')

url 对象可以在很多情况下替换 url 字符串，因为它会进行隐式转换。

比如：

location.href = new URL('/s?ie=UTF-8&wd=url', 'https://www.baidu.com')

解析 URL 字符串

如果你拥有一个 url 字符串，也可以通过 URL 对它进行解析。

const urlStr = "https://www.baidu.com/s?ie=UTF-8&wd=url"
const url = new URL(urlStr)
console.log(url.protocol)// https:
console.log(url.host)// "www.baidu.com"
console.log(url.search)// "?ie=UTF-8&wd=url"

编码

在 URL 中，很多特殊的字符串是不合法的，比如中文和空格等。

合法符号如下：

• URL 元字符：分号（;），逗号（,），斜杠（/），问号（?），冒号（:），at（@），&，等号（=），加号（+），美元符号（$），井号（#）
• 语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（'），圆括号（()）

除了这两类，其它所有字符都是不合法的。如果你要在字符串中包含不合法字符，都必须转义，规则是根据操作系统的默认编码，将每个字节转为百分号（%）加上两个大写的十六进制字母。而一个中文是三个字节，所以会被转换为 6 个转义字符。

在 RFC3986 中规定了哪些字符应该被转义。

比如你在地址栏输入：

https://www.baidu.com/s?wd=前端

当你拷贝下来之后会发现变成了下面这个格式：www.baidu.com/s?wd=%E5%89…

URL 中前端两个字被转义成了 E5 89 8D 和 E7 AB AF 这 6 个 UTF8 字节码。

字符转义函数

上面这种情况是浏览器自动帮我们做了转义，但如果我们在 JS 中有一个字符串，是未转义的，那么就需要我们自己来转义。

比如你有一个 url 字符串。

const urlStr = "https://www.baidu.com/s?ws=前端"

你想跳转到对应的网页。

location.href = urlStr

发现会失败，原因就是前端两个汉字没有经过转义。

JavaScript 提供四个 URL 的编码/解码方法。

encodeURI

encodeURI 方法用于编码整个 URL。它的参数是一个字符串，代表整个 URL。它会将元字符和语义字符之外的字符，都进行转义。

encodeURI(urlStr)
// "https://www.baidu.com/s?ws=%E5%89%8D%E7%AB%AF"

encodeURIComponent

encodeURIComponent 方法用于转码 URL 的组成部分，会转码除了语义字符之外的所有字符，即元字符也会被转码。所以，**它不能用于转码整个 URL。**它接受一个参数，就是 URL 的片段。

encodeURIComponent('前端')
// "%E5%89%8D%E7%AB%AF"

如果你将整个 URL 进行转义，是不可以的。

encodeURIComponent(urlStr)
// "https%3A%2F%2Fwww.baidu.com%2Fs%3Fws%3D%E5%89%8D%E7%AB%AF"

上面代码中，encodeURIComponent 会连 URL 元字符一起转义，所以如果转码整个 URL 就会出现问题。

decodeURI

decodeURI 方法用于整个 URL 的解码。它是 encodeURI 方法的逆运算。它接受一个参数，就是转码后的 URL。

const urlEncode = encodeURI(urlStr)
// "https://www.baidu.com/s?ws=%E5%89%8D%E7%AB%AF"
const urlDecode = decodeURI(urlEncode)
// "https://www.baidu.com/s?ws=前端"

decodeURIComponent

decodeURIComponent 用于对 URL 片段进行解码。它是 encodeURIComponent 方法的逆运算。它接受一个参数，就是转码后的 URL 片段。

decodeURIComponent('%E5%89%8D%E7%AB%AF')
// "前端"

URLSearchParams对象

search 字符串是一段并不是很好处理的文本。

比如我有一个如下 URL：

https://www.baidu.com/s?wd=url&ie=utf-8

它的查询参数部分如下：

wd=url&ie=utf-8

这段查询参数，我们如果需要替换 ie 的值或者 wd 的值都需要正则匹配或者使用类似的麻烦技术。（在我接触 URLSearchParams 之前就是用这种方式处理的。）

如果我们能够将这段文本通过类似对象的方式操作是最方便的。URLSearchParams 就提供了这种方式。

let url = new URL('https://www.baidu.com/s?wd=url&ie=utf-8');
url.searchParams.set('wd', 'searchparams');
console.log(url);

除了 set 方法之外，URLSearchParams 还提供了更多的方法，你可以逐一尝试。

encode 函数与 URL/URLSearchParams

encode 函数和 URL/URLSearchParams 对象之间的区别就是，encode 函数基于 RFC2396，这是一个过时的 URL 规范。而 URL 和 URLSearchParams 是基于最新的 RFC3986。

在处理 IPV6 时，encode 就会出现问题。不过这种情况很少见，绝大多数情况下，encode 函数都可以正常运行。