点此查看所有教程、项目、源码导航

1. 背景

上一篇我们认识了 BOM 的顶层对象 window，以及基础弹窗。

window 下面还有几个非常实用的子对象：location、history、navigator。它们都属于 BOM，用来获取浏览器窗口、地址栏、访问历史相关信息。

简单区分三个对象的职责：

• location：负责地址栏，读取地址、跳转页面、刷新页面
• history：负责访问历史记录，前进、后退
• navigator：负责浏览器本身信息，比如浏览器名称、操作系统

2. location 对象

location 代表当前页面的地址栏信息，我们可以读取地址，也可以修改地址实现页面跳转。

2.1 读取地址信息

// 获取完整URL地址console.log(location.href);// 获取域名+端口console.log(location.host);// 获取端口号console.log(location.port);// 获取路径部分console.log(location.pathname);

最常用的就是location.href，它可以拿到浏览器地址栏里完整的网址。

2.2 页面跳转

给 location.href 赋值，就会跳转到新页面。

// 跳转到新页面location.href="https://www.baidu.com";

2.3 刷新页面

// 刷新当前页面location.reload();

小提示：reload () 就等价于我们按浏览器的刷新按钮。

3. history 对象

history 保存了当前标签页的访问历史栈，用来实现页面前进、后退，不能随意读取历史里面的网址（浏览器安全限制），只能控制跳转。

3.1 后退

// 回到上一页，等价于浏览器左上角后退按钮history.back();

3.2 前进

// 去下一页，等价于浏览器的前进按钮history.forward();

3.3 跳转到指定历史记录

// 参数 1：前进1页；参数 -1：后退1页；参数0：刷新当前页history.go(-1);history.go(1);history.go(0);

注意：必须要有历史记录才能前进后退。刚打开页面，没有上一页，back () 不会有任何效果。

4. navigator 对象

navigator 翻译为导航器，它里面存放的是当前浏览器、设备、操作系统的相关信息，由浏览器自动提供，我们主要用来读取信息，一般不能修改。

4.1 navigator.userAgent（最核心）

userAgent 是一个很长的字符串，里面打包了浏览器品牌、版本号、操作系统、设备类型等一大堆信息。

console.log(navigator.userAgent);

例如我的微软Edge浏览器打印如下：

打印出来的字符串看起来很杂乱，它的作用就是让 JS 知道：用户是用什么设备、什么浏览器打开网页的。

注意：userAgent 是浏览器上报的字符串，是可以被修改伪装的，所以它的判断只能作为参考，不能当成百分百准确的依据。

4.2 navigator.platform 获取操作系统平台

console.log(navigator.platform);

常见返回值：

• Win32：Windows 系统
• MacIntel：苹果 Mac 系统
• Linux x86_64：Linux 系统

例如我的Windows电脑打印如下：

4.3 navigator.appName、navigator.appVersion（了解）

早期用来识别浏览器，现在现代浏览器返回值统一，不太推荐用来判断浏览器，属于历史遗留属性。

console.log(navigator.appName);console.log(navigator.appVersion);

4.4 实战场景：判断移动端 / PC 端

开发网页的时候，经常需要区分手机和电脑，展示不一样的内容。
原理就是在 userAgent 字符串里面查找有没有Mobile这个关键词。

varua=navigator.userAgent;if(ua.indexOf("Mobile")!=-1){console.log("当前是手机端访问");}else{console.log("当前是电脑端访问");}

解释：indexOf如果找到字符串，返回下标；找不到返回 -1。只要不等于 - 1，就说明包含 Mobile，代表是移动设备。

5. 小结

1. location：操作地址栏，href 跳转页面，reload 刷新页面。
2. history：控制页面前进后退，back ()、forward ()、go ()，出于安全，不能读取历史里的网址。
3. navigator：读取浏览器、设备、系统信息，最常用 userAgent；可以简单区分手机和电脑。
4. location、history、navigator 都是 window 下的对象，书写时 window 可以省略。