# JavaScript教程 - 16 BOM

什么是 BOM？

BOM（Browser Object Model）是浏览器对象模型，它提供了用来和浏览器窗口和浏览器本身交互的对象集合。BOM 更偏向于浏览器环境的控制，比如窗口尺寸、跳转地址、历史记录、弹窗等。

提供的主要对象有：

window对象：表示浏览器窗口
navigator对象：可以获取浏览器与系统信息
location对象：可以控制或获取地址栏信息
history对象：浏览器历史记录
screen对象：可以获取屏幕信息

其实 BOM 对象是作为 window 对象的属性保存的，所以上面的对象（除了window对象本身），都是 window 对象的属性，都可以使用window.属性 的方式访问，也可以直接访问。

# 16.1 window对象

window对象是浏览器窗口的顶级对象，所有全局变量和函数都是 window 对象的属性和方法。

前面已经讲过了，这里简单再介绍一下。

// 全局变量实际上是window的属性
var globalVar = '我是全局变量';
console.log(window.globalVar); // "我是全局变量"

// 全局函数是window的方法
function globalFunc() {
  console.log('我是全局函数');
}
window.globalFunc(); // "我是全局函数"

1
2
3
4
5
6
7
8
9

# 16.2 location对象

location对象可以控制和获取地址栏信息，可以解析页面地址，还可以实现页面跳转。

举个栗子：

因为使用的是 Live-Server 插件测试的，打开测试页面的地址是：http://127.0.0.1:5500/index.html 。

下面测试一下获取地址栏信息，以及实现页面跳转。

通过两个按钮，来触发信息获取和页面跳转。

<body>
  <button id="btn1">获取URL信息</button>
  <button id="btn2">页面跳转</button>

  <script>
    // 这个地方是为了测试，将地址修改为下面的值
    location.href = "http://127.0.0.1:5500/index.html?name=foooor&age=18#niubi";

    const btn1 = document.getElementById("btn1");
    const btn2 = document.getElementById("btn2");

    btn1.addEventListener('click', function () {
      // 获取当前URL信息
      console.log(location.href); // 完整URL: http://127.0.0.1:5500/index.html?name=foooor&age=18#niubi
      console.log(location.protocol); // 协议 (http: 或 https:): http:
      console.log(location.host); // 主机名和端口: 127.0.0.1:5500
      console.log(location.hostname); // 主机名: 127.0.0.1
      console.log(location.port); // 端口: 5500
      console.log(location.pathname); // 路径部分: /index.html
      console.log(location.search); // 查询字符串: ?name=foooor&age=18
      console.log(location.hash); // 锚点部分: #niubi
    });

    btn2.addEventListener('click', function() {
      location.href = "https://www.foooor.com"; // 跳转到新页面
      // 或者location = "https://www.foooor.com"; // 跳转到新页面
      // 或者location.assign("https://www.foooor.com"); // 跳转到新页面

      // location.reload(); // 重新加载当前页面，可以传递一个参数true，表示强制清除缓存
      // location.replace("https://www.foooor.com"); // 替换当前页面(不保留历史记录，浏览器无法回退)
    })

  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 16.2 navigator对象

navigator对象提供浏览器和操作系统相关信息，我们可以使用navigator对象判断用户是什么浏览器。

举个栗子：

// 浏览器信息
console.log(navigator.userAgent); // 用户代理字符串
console.log(navigator.platform);  // 操作系统平台
console.log(navigator.language);  // 浏览器语言
console.log(navigator.onLine);    // 是否联网

1
2
3
4
5

userAgent提供的一段描述当前浏览器、设备和操作系统的信息字符串。这个字符串由浏览器在发起请求时自动附加在 HTTP 请求头中，用于告诉服务器**“我是谁”**，以便服务器做出适配处理。

例如我的浏览器返回如下信息：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

通过userAgent可以判断用户使用的什么浏览器，举个栗子：

function getBrowserName(userAgent) {
  // 此处顺序很重要，并且对于未列出的浏览器，这可能会报错。

  if (userAgent.includes("Firefox")) {
    // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
    return "Mozilla Firefox";
  } else if (userAgent.includes("SamsungBrowser")) {
    // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
    return "Samsung Internet";
  } else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
    // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
    return "Opera";
  } else if (userAgent.includes("Edge")) {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
    return "Microsoft Edge (Legacy)";
  } else if (userAgent.includes("Edg")) {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
    return "Microsoft Edge (Chromium)";
  } else if (userAgent.includes("Chrome")) {
    // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
    return "Google Chrome 或 Chromium";
  } else if (userAgent.includes("Safari")) {
    // "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
    return "Apple Safari";
  } else {
    return "未知";
  }
}

const browserName = getBrowserName(navigator.userAgent);
console.log(`你正在使用 ${browserName} 浏览器`);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

上面的代码是 https://developer.mozilla.org/ 网站上（搜索Window.navigator可以看到）提供的一段代码，可以通过 userAgent 判断用的是什么浏览器。

# 16.4 history对象

history 可以用于访问和操作浏览器的历史记录，但是是不能获取访问记录的，只是可以实现页面“前进”“后退”的功能。

举个栗子：

<body>
  <button id="back">后退</button>
  <button id="forward">前进</button>

  <script>
    const forward = document.getElementById('forward');
    const back = document.getElementById('back');

    forward.addEventListener('click', function() {
      history.forward();  // 前进
    })

    back.addEventListener('click', function() {
      history.back();  // 后退
    }) 
  </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

首先访问其他的网页，然后再访问上面的测试页面，这样才有访问记录，才可以进行后退操作。
通过 history.forward() 和 history.back() 进行页面的前进和后退，这个和浏览器上面的按钮功能是一样的。

也可以使用 history.go(n) 来控制：

history.go(-1); // 后退 1 页，等价于 history.back()
history.go(1);  // 前进 1 页，等价于 history.forward()
history.go(0);  // 刷新当前页面

1
2
3

每访问一个新的页面，会把它加入浏览器的历史列表中，通过 history.length 可以获取当前会话中历史列表的数量：

console.log(history.length); // 访问过的页面数量

上面只是简单的介绍了BOM 中的一些 API，其实 BOM 的 API 是非常非常多的，开发的时候，用到再去查询。

← 15-DOM-4