第13章客户端检测-KeepStudy

第13章客户端检测

> 客户端检测一直是 Web 开发中饱受争议的话题，浏览器之间的差异和莫名其妙的行为，让客户端检测变成一种补救措施，而且也成为了开发策略的重要一环。
>
> 要检测当前的浏览器有很多方法，每一种都有各自的长处和不足。问题的关键在于知道客户端检测应该是解决问题的最后一个举措。任何时候，只要有更普适的方案可选，都应该毫不犹豫地选择。首先要设计最常用的方案，然后再考虑为特定的浏览器进行补救。

### 13.1　能力检测 382

> 能力检测（又称特性检测）即在 JavaScript 运行时中使用一套简单的检测逻辑，测试浏览器是否支持某种特性。这种方式不要求事先知道特定浏览器的信息，只需检测自己关心的能力是否存在即可。
>
> 能力检测的关键是理解两个重要概念。首先，如前所述，应该先检测最常用的方式。其次是必须检测切实需要的特性。某个能力存在并不代表别的能力也存在。

```javascript
//能力检测的基本模式如下：
if (object.propertyInQuestion) { 
 // 使用 object.propertyInQuestion 
}
```

##### 13.1.1 安全能力检测

> 能力检测最有效的场景是检测能力是否存在的同时，验证其是否能够展现出预期的行为。

##### 13.1.2 基于能力检测进行浏览器分析

- 检测特性

```javascript
  // 检测浏览器是否支持 Netscape 式的插件
  let hasNSPlugins = !!(navigator.plugins && navigator.plugins.length); 
  
  // 检测浏览器是否具有 DOM Level 1 能力
  let hasDOM1 = !!(document.getElementById && document.createElement && 
   document.getElementsByTagName);
  ```

- 检测浏览器

- 能力检测的局限

### 13.2　用户代理检测 386

##### 13.2.1 用户代理的历史

##### 13.2.2 浏览器分析

- 伪造用户代理

> 与其劳心费力检测造假，不如更好地专注于浏览器识别。如果相信浏览器返回的用户代理字符串，那就可以用它来判断浏览器。如果怀疑脚本或浏览器可能篡改这个值，那最好还是使用能力检测。

- 分析浏览器

> 通过解析浏览器返回的用户代理字符串，可以极其准确地推断出下列相关的环境信息：浏览器版本、渲染引擎、设备类型（桌面/移动）、设备生产商、设备型号、操作系统、操作系统版本

### 13.3　软件与硬件检测 394

##### 13.3.1 识别浏览器与操作系统

1. **navigator.oscpu**：一个字符串，通常对应用户代理字符串中操作系统/系统架构相关信息。

2. **navigator.vendor**：一个字符串，通常包含浏览器开发商信息。返回这个字符串是浏览器navigator 兼容模式的一个功能。

3. **navigator.platform**：一个字符串，通常表示浏览器所在的操作系统。

4. **screen.colorDepth** 和 **screen.pixelDepth**：返回一样的值，即显示器每像素颜色的位深。

5. **screen.orientation**：返回一个 ScreenOrientation 对象，其中包含屏幕信息。

##### 13.3.2 浏览器元数据

- 获取浏览器当前的位置：getCurrentPosition()

```javascript
  // getCurrentPosition()会以 position 对象为参数调用传入的回调函数
  navigator.geolocation.getCurrentPosition((position) => p = position);
  
  //这个 position 对象中有一个表示查询时间的时间戳，以及包含坐标信息的 Coordinates 对象：
  console.log(p.timestamp); // 1525364883361 
  console.log(p.coords); // Coordinates {...}
  
  //Coordinates 对象中包含标准格式的经度和纬度，以及以米为单位的精度。
  console.log(p.coords.latitude, p.coords.longitude); // 37.4854409, -122.2325506 
  console.log(p.coords.accuracy); // 以米为单位的精度
  console.log(p.coords.altitude); // 海拔高度,单位是米
  console.log(p.coords.altitudeAccuracy); //海拔高度,精度值单位是米
  console.log(p.coords.speed);  //表示设备每秒移动的速度。
  console.log(p.coords.heading);  //朝向，表示相对于正北方向移动的角度
  ```

##### 13.3.3 硬件

1. 处理器核心数 navigator.hardwareConcurrency

2. 设备内存大小 navigator.deviceMemory

3. 最大触点数 navigator.maxTouchPoints

顶部

JavaScript高级程序设计(4)

目录

相关推荐