快来看看 navigator 能获取到浏览器哪些信息吧

在JavaScript中，navigator对象用于获取浏览器的相关信息。它提供了一系列属性和方法，可以帮助我们了解浏览器的品牌、版本、用户代理等信息。

平常使用中可能各个厂商可能信息不一致，可以利用该API做一些兼容。

举个栗子，例如isMobile，这个插件就是利用获取navigator.userAgent来判断是否是移动端还是PC还是IPAD等等。

console.log(navigator);

输出结果可能会类似于下面这样：

{
  "appCodeName": "Mozilla",
  "appName": "Netscape",
  "appVersion": "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36",
  "platform": "Win32",
  "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36",
  "language": "zh-CN",
  "languages": ["zh-CN", "zh"],
  "onLine": true,
  "cookieEnabled": true,
  ...
}

上述代码中，我们可以看到navigator对象的一些常见属性。下面将对每个属性进行简单说明。

常见属性

appCodeName

• 类型：字符串
• 描述：返回浏览器的内部名称

console.log(navigator.appCodeName);   // "Mozilla"

应用场景：可以帮助开发者判断当前浏览器是否为 Mozilla 系列的浏览器。

appName

• 类型：字符串
• 描述：返回浏览器的名称

console.log(navigator.appName);      // "Netscape"

应用场景：可以帮助开发者判断当前浏览器是否为 Netscape Navigator 浏览器。

appVersion

• 类型：字符串
• 描述：返回浏览器的版本号

console.log(navigator.appVersion);   // "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"

应用场景：可以帮助开发者获取当前浏览器的详细版本信息。

platform

• 类型：字符串
• 描述：返回运行浏览器的操作系统平台

console.log(navigator.platform);    // "Win32"

应用场景：可以帮助开发者判断当前浏览器所在的操作系统平台，从而根据不同的操作系统做出相应的处理。

userAgent

• 类型：字符串
• 描述：返回浏览器发送到服务器的用户代理头部的值

console.log(navigator.userAgent);   // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"

应用场景：可以帮助开发者获取当前浏览器的详细信息，包括渲染引擎、操作系统、浏览器厂商和版本等。

language

• 类型：字符串
• 描述：返回当前页面语言

console.log(navigator.language);   // "zh-CN"

应用场景：可以帮助开发者根据用户的语言偏好来确定网站的默认语言设置。

languages

• 类型：数组
• 描述：返回用户偏好的语言列表

console.log(navigator.languages);  // ["zh-CN", "zh"]

应用场景：可以帮助开发者获取用户浏览器偏好语言列表，从而针对性地提供多语言支持。

onLine

• 类型：布尔值
• 描述：返回当前是否连接到互联网

当onLine为true时，表示当前设备已连接到互联网；当onLine为false时，表示当前设备未连接到互联网。

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

应用场景：可以帮助开发者检测当前设备是否连接到互联网，从而在需要网络连接的场景下提供相应的友好提示或错误处理。

cookieEnabled

• 类型：布尔值
• 描述：返回当前是否启用了cookie

console.log(navigator.cookieEnabled);   // true

应用场景：可以帮助开发者判断当前浏览器是否启用了cookie，从而根据不同的cookie设置进行相应的处理。

其他属性和方法

除了上述常见属性外，navigator对象还提供了其他一些属性和方法：

product

• 类型：字符串
• 描述：返回浏览器的产品名称

console.log(navigator.product);                // "Gecko"

应用场景：可以帮助开发者判断当前浏览器是否为 Gecko 系列的浏览器。

vendor

• 类型：字符串
• 描述：返回浏览器厂商的名称

console.log(navigator.vendor);                 // "Google Inc."

应用场景：可以帮助开发者获取当前浏览器的厂商信息。

vendorSub

• 类型：字符串
• 描述：返回浏览器厂商的版本号

console.log(navigator.vendorSub);              // ""

应用场景：可以帮助开发者获取当前浏览器厂商的版本信息。

maxTouchPoints

• 类型：整数
• 描述：返回设备支持多点触控的最大点数

console.log(navigator.maxTouchPoints);         // 10

应用场景：可以帮助开发者判断当前设备(一般是移动端)是否支持多点触控，从而针对性地优化网站交互体验。

hardwareConcurrency

• 类型：整数
• 描述：返回设备的CPU核心数

console.log(navigator.hardwareConcurrency);   // 4

应用场景：可以帮助开发者获取当前设备的CPU核心数，从而针对性地进行计算密集型操作的优化。

doNotTrack

• 类型：字符串
• 描述：返回用户是否启用了“请勿跟踪”功能

console.log(navigator.doNotTrack);             // "1"

应用场景：可以帮助开发者检测用户是否启用了隐私保护功能，从而尊重用户隐私并提供相应的提示和处理方式。

getBattery()

• 返回值：Promise 对象
• 描述：异步获取设备电池信息（需要用户权限）

navigator.getBattery().then(function(battery) {
  console.log(battery.level);                  // 0.95
});

应用场景：可以帮助开发者获取设备电池信息，从而优化网站的能耗和性能表现。

getGamepads()

• 返回值：游戏手柄列表
• 描述：返回连接到浏览器的游戏手柄列表

console.log(navigator.getGamepads());          // [null, null, null, null]

应用场景：可以帮助开发者检测用户是否使用了游戏手柄等外部输入设备，从而提供相应的交互支持。