通常与 BOM 相关的常用对象有：

其他的还有一些辅助，如 alert、confirm。

这些都可以通过 window 对象进行访问。

这些对象在访问时开头是小写的！

window.location 只读，返回 Location 对象，其中包含有关文档当前位置的信息。(MDN)

与 location 相关的最常用的就是了。

给 location 的 href 赋值，就可以实现的。

window.location.href = '//imooc.com';

还有另外两种方式也可以实现。

window.location = '//imooc.com';

window.location.assign('//imooc.com');

用的比较的多的就是 href 。

使用 replace 也可以到新，但是后就无法再后退了。

location 下还有其他与路径相关的信息，可以通过到控制台观察。

Node.js 文档中的一张表就很好的描述了 URL 的各个组成部分，结合表更好理解这些。

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                              href                                              │
├──────────┬──┬─────────────────────┬────────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │          host          │           path            │ hash  │
│          │  │                     ├─────────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │    hostname     │ port │ pathname │     search     │       │
│          │  │                     │                 │      │          ├─┬──────────────┤       │
│          │  │                     │                 │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │    hostname     │ port │          │                │       │
│          │  │          │          ├─────────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │          host          │          │                │       │
├──────────┴──┼──────────┴──────────┼────────────────────────┤          │                │       │
│   origin    │                     │         origin         │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴────────────────────────┴──────────┴────────────────┴───────┤
│                                              href                                              │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

另外常用的还有 reload ，用于刷新。

只读 Window.navigator 会返回 Navigator 对象的引用，可以用于请求运行当前的应用程序的相关信息。(MDN)

navigator 最常用到的就是 userAgent ，通常简称为 UA。

console.log(navigator.userAgent);

// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36
// 不同设备的不一定相同

该包含了一些浏览器、操作系统、设备等信息，通常判断平台，如 ios、android，或者判断浏览器都会使用这个。

但 userAgent 并不是很准确，特别是一些被拉黑名单的第三方的浏览器厂商，通过伪造 UA 欺骗网站，防止被，比如通将 UA 设置成某个版本的 Chrome 浏览器，达到伪造浏览器的目的。

除了 userAgent，其他的用到的相对较少。

但也有比较有趣的，比如 onLine，这个可以用于判断网络状态。

console.log(navigator.onLine); // true or false

如果网站需要 i18n (国际化)，还会用到 language 。

其他的一些处于试验性的特性，也会被放在 navigator 下。如以前申请媒体设备需要使用 navigator.getUserMedia，后来随着特性的，变成了MediaDevices.getUserMedia()。

返回当前window的screen对象。screen对象实现了Screen接口，它是个特殊的对象，返回当前渲染窗口中和屏幕有关的。(MDN)

想要当前浏览器所在屏幕的分辨率，就可以通过 screen 的 width 和 height 来。

var screenWidth = window.screen.width;
var screenHeight = window.screen.height;

console.log('分辨率: ' + screenWidth + 'x' + screenHeight);

Window.history是只读，用来History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的，以及中通过框架加载的）的接口。(MDN)

history 主要用于操作浏览器历史相关的，如前进、后退。

通常用的最多的就是 history.back()，即返回。

history.back();

history 还可以实现前端路由。

通过 history.pushState 可以改变的路径，但不会触发的。

通过 popstate 事件监听的历史出栈操作。

<section id="app">
  <a href="user" class="link">中心</a>
  <a href="setting" class="link">设置</a>

  <div class="container"></div>
</section>

<script>
  // 路由
  document.querySelectorAll('.link').forEach(function(item) {
    item.addEventListener('click', function(e) {

      e.preventDefault();

      // 拿到需要的地址
      let link = item.getAttribute('href');
      // 往history中历史记录   0-参数 1-title 2-url
      window.history.pushState({name: link}, link, link);

      // 具体的业务
      document.querySelector('.container').innerHTML = link;

    }, false);
  });

  // 监听路由
  window.addEventListener('popstate', function(e) {
    console.log({
      location: location.href,
      state: e.state
    });
    document.querySelector('.container').innerHTML = e.state.name;
  }, false);
</script>

@H__813@

通过 pushState 向历史栈一条历史，后根据路径对应的。

当 popstate 监听到出栈的时候就可以拿到上一条栈的页写信息，可以做一些其他操作，如还原上。

观察 network 会发现并没有进行的。但需要注意的是刷新后可能会 ，这个时候就需要服务端处理或者代理服务器做配置。

因为路径改变后，浏览器再次访问当前地址，可能找不到这个地址对应的资源。

这是前端路由的一种实现方式，采用 History API，也是面试中会经常考到的题目。另一种方式是使用 hash 实现，兼容性更好，并且不需要服务端或代理服务器做配合实现。

BOM 相关的对象经常会被使用到，但每个对象使用到的并不是非常多。

通过对象的名字也可以知道其大致的作用，所以当碰到某些需求，如 “浏览器的某些信息” 的时候，就应该想到 Navigator 对象下有没有可以帮助实现需求的。