2021-07-29 11:08:52 +08:00
---
2022-10-09 15:12:20 +08:00
title: 45-BOM简介和navigator.userAgent& History& Location
2021-07-29 11:08:52 +08:00
---
< ArticleTopAd > < / ArticleTopAd >
2019-11-27 19:20:21 +08:00
## 常见概念
### JavaScript的组成
JavaScript基础分为三个部分：
- ECMAScript：
- **DOM**： （ ） ，
- **BOM**： （ ） ，
### 常见的 BOM 对象
2019-11-27 19:29:49 +08:00
BOM可以让我们通过JS来操作浏览器。BOM中为我们提供了一些对象，
2019-11-27 19:20:21 +08:00
常见的 BOM对象有：
- Window： ，
2019-11-27 19:29:49 +08:00
- Navigator： ，
2019-11-27 19:20:21 +08:00
- Location： ，
2019-11-27 19:29:49 +08:00
- History： ， ， ， ，
2019-11-27 19:20:21 +08:00
- Screen： ，
备注：这些 BOM 对象都是作为 window 对象的属性保存的， ， ， `window.location.href` ，也可以直接使用 `location.href` ，二者是等价的。
2019-11-27 19:29:49 +08:00
备注2： ，
2019-11-27 19:20:21 +08:00
2019-11-29 17:39:55 +08:00
这篇文章，我们先来讲一下 几个常见的 BOM 对象。
2019-11-27 19:20:21 +08:00
## Navigator 和 `navigator.userAgent`
`Navigator` 代表当前浏览器的信息，通过该对象可以识别不同的浏览器。
由于历史原因，
2019-11-27 19:29:49 +08:00
**一般我们只会使用`navigator.userAgent`来获取浏览器的信息**。
2019-11-27 19:20:21 +08:00
2019-11-27 19:29:49 +08:00
userAgent 的值是一个字符串，简称 **UA** ， ，
2019-11-27 19:20:21 +08:00
**代码举例**： （ ）
```html
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< title > Document< / title >
< / head >
< body >
< script >
2019-11-27 19:29:49 +08:00
var ua = navigator.userAgent; // 获取当前浏览器的 userAgent
2019-11-27 19:20:21 +08:00
console.log('qianguyihao 当前浏览器的UA是：
if (/firefox/i.test(ua)) {
alert('是火狐浏览器');
} else if (/chrome/i.test(ua)) {
alert('是Chrome浏览器');
} else if (/msie/i.test(ua)) {
alert('是IE浏览器');
} else if ('ActiveXObject' in window) {
alert('是 IE11 浏览器');
}
< / script >
< / body >
< / html >
```
### 在电脑上模拟移动端浏览器
2019-11-27 19:29:49 +08:00
不同浏览器（包括微信内置的浏览器）的 userAgent 信息，是不一样的，我们可以根据 `navigator.userAgent` 属性来获取。
2019-11-27 19:20:21 +08:00
比如说， ， ，
2019-11-27 19:29:49 +08:00
上图显示，
2019-11-27 19:20:21 +08:00
```
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36"
```
我们还可以在电脑浏览器的控制台里可以添加很多设备，通过这种方式，可以模拟移动端浏览器的场景，非常有用，请务必掌握。操作如下：
（ ） ， ：
2019-11-27 19:29:49 +08:00
2019-11-27 19:20:21 +08:00
（ ） ，
2019-11-27 19:29:49 +08:00
2019-11-27 19:20:21 +08:00
2019-11-27 19:29:49 +08:00
### 不同浏览器的 userAgent
2019-11-27 19:20:21 +08:00
2019-12-04 16:14:08 +08:00
iOS 版微信浏览器：
2019-11-27 19:20:21 +08:00
```
Mozilla/5.0 (iPhone; CPU iPhone OS 9_3 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13E233 MicroMessenger/6.3.15 NetType/WIFI Language/zh_CN
```
2019-12-04 16:14:08 +08:00
Android 版微信浏览器：
2019-11-27 19:20:21 +08:00
```
Mozilla/5.0 (Linux; Android 5.0.1; GT-I9502 Build/LRX22C; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.121 Mobile Safari/537.36 MicroMessenger/6.1.0.78_r1129455.543 NetType/WIFI
```
2019-12-04 16:14:08 +08:00
iOS 版本QQ浏览器：
```
Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 QQ/7.3.5.473 V1_IPH_SQ_7.3.5_1_APP_A Pixel/1125 Core/UIWebView Device/Apple(iPhone X) NetType/WIFI QBWebViewType/1
```
Android 版 QQ浏览器：
```
Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 V1_AND_SQ_7.3.2_762_YYB_D QQ/7.3.2.3350 NetType/WIFI WebP/0.3.0 Pixel/1080
```
2019-11-29 17:23:54 +08:00
**参考链接**：
2019-11-27 19:20:21 +08:00
2019-12-04 16:14:08 +08:00
- [微信、QQ在Android和iOS的UserAgent ](https://blog.csdn.net/taambernk520/article/details/80801574 )
2019-11-27 19:20:21 +08:00
- [判断微信内置浏览器的UserAgent ](http://www.cnblogs.com/7z7chn/p/5370352.html )
- [微信内置浏览器UserAgent的判断 ](https://gist.github.com/wjp2013/fff34c063cf0cf227d65 )
2019-11-29 17:23:54 +08:00
## History 对象
History对象：
### History对象的属性
```javascript
history.length
```
解释：获取浏览器历史列表中的 url 数量。注意， ， ，
### History对象的方法
**方法1**：
```
history.back();
```
解释：用来回退到上一个页面，作用和浏览器的「回退按钮」一样。
**方法2**：
```javascript
history.forward();
```
解释：用来跳转下一个页面，作用和浏览器的「前进按钮」一样。
**方法3**：
```javascript
history.go( int n); // 需要整数作为参数
// 代码举例：
history.go( 1 ); // 向前跳转一个页面，相当于 history.forward()
history.go( 2 ); // 表示向前跳转两个页面
2019-11-29 19:33:05 +08:00
history.go( 0 ); // 刷新当前页面
2019-11-29 17:23:54 +08:00
history.go( -1 ); // 向后跳转一个页面，相当于 history.back()
history.go( -2 ); // 向后跳转两个页面
```
解释：向前/向后跳转 n 个页面。
2019-11-29 19:33:05 +08:00
备注：浏览器的前进按钮、后退按钮，在这个位置：
2019-11-29 17:23:54 +08:00
## Location 对象
Location 对象：封装了浏览器地址栏的 URL 信息。
下面介绍一些常见的属性和方法。
2022-03-25 15:10:15 +08:00
### Location 对象的属性：
2019-11-29 17:39:55 +08:00
```
location.href
location.href = 'https://xxx';
```
2022-03-25 15:10:15 +08:00
解释：获取当前页面的 url 路径（或者设置 url 路径）；或者跳转到指定路径。
2019-11-29 17:23:54 +08:00
2022-03-25 15:10:15 +08:00
举例1：
2019-11-29 17:23:54 +08:00
```javascript
console.log(location.href); // 获取当前页面的url 路径
```
2022-03-25 15:10:15 +08:00
举例2：
2019-11-29 17:23:54 +08:00
```javascript
location.href = 'www.baidu.com'; // 跳转到指定的页面链接。通俗理解就是：跳转到其他的页面
```
从上方的**举例2**中可以看出：如果直接将`location.href`属性修改为一个绝对路径（或相对路径），则页面会自动跳转到该路径，并生成相应的历史记录。
2022-03-25 15:10:15 +08:00
**window.location.href 是异步代码：**
需要特别注意的是： ，
解决办法：在 location.href 的下一行，加上 return 即可。意思是，执行了 location.href 之后，就不要再继续往下执行了。
参考链接：[location.href的异步机制](https://juejin.cn/post/6844904040518647815)
2019-11-29 17:39:55 +08:00
### Location 对象的方法
**方法1**：
```javascript
location.assign(str);
```
2019-11-29 17:23:54 +08:00
2019-11-29 19:33:05 +08:00
解释：用来跳转到其他的页面，作用和直接修改`location.href`一样。
2019-11-29 17:23:54 +08:00
2019-11-29 17:39:55 +08:00
**方法2**：
2019-11-29 17:23:54 +08:00
2019-11-29 17:39:55 +08:00
```javascript
location.reload();
```
2019-11-29 17:23:54 +08:00
解释：用于重新加载当前页面，作用和刷新按钮一样。
代码举例：
```javascript
location.reload(); // 重新加载当前页面。
location.reload(true); // 在方法的参数中传递一个true，
```
2019-11-29 17:39:55 +08:00
**方法3**：
```javascript
location.replace();
```
2019-11-29 17:23:54 +08:00
解释：使用一个新的页面替换当前页面，调用完毕也会跳转页面。但不会生成历史记录，不能使用「后退按钮」后退。
## 我的公众号
2021-05-24 12:43:12 +08:00
想学习< font color = #0000ff > **更多技能**< / font > ？不妨关注我的微信公众号：**千古壹号**（ ：
2019-11-29 17:23:54 +08:00
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
