详解js中的useragent|极客笔记

详解js中的useragent

在前端开发中，经常会遇到需要根据不同浏览器或设备来做一些特殊处理的情况。而useragent就是一个非常重要的信息，它可以帮助我们获取用户的浏览器及操作系统等信息。本文将详细介绍useragent的概念、如何在js中获取useragent、常见的useragent字符串以及如何根据useragent来进行判断和处理。

什么是useragent

User-Agent是HTTP协议的一部分，它是服务器和浏览器之间传递的一种字符串信息，用于标识客户端的软件和版本、操作系统、浏览器等信息。通过识别User-Agent，服务器可以根据客户端的不同特性来返回不同的响应内容，以提供更好的用户体验。

如何在js中获取useragent

在前端开发中，我们通常会使用navigator对象的userAgent属性来获取useragent信息。这个属性包含了用户代理的浏览器和操作系统等信息。下面是一个获取useragent的示例代码：

const useragent = navigator.userAgent;
console.log(useragent);

运行结果可能如下所示：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3

常见的useragent字符串

不同的浏览器和设备有不同的useragent字符串，下面是一些常见的useragent字符串示例：

Chrome浏览器: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3
Firefox浏览器: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0
Safari浏览器: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.2 Safari/605.1.15
Edge浏览器: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edg/18.17763
微信小程序: Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_3 like Mac OS X) AppleWebKit/603.3.8 (KHTML, like Gecko) Mobile/14G60 MicroMessenger/6.5.22

根据useragent进行判断和处理

根据不同的useragent信息，我们可以进行一些特殊的处理，比如针对不同浏览器显示不同的UI，或者针对不同设备进行兼容性处理等。

下面是一个根据useragent判断浏览器类型的示例代码：

const userAgent = navigator.userAgent;
if(userAgent.indexOf('Chrome') !== -1) {
    console.log('This is Chrome browser');
} else if(userAgent.indexOf('Firefox') !== -1) {
    console.log('This is Firefox browser');
} else if(userAgent.indexOf('Safari') !== -1) {
    console.log('This is Safari browser');
} else if(userAgent.indexOf('Edge') !== -1) {
    console.log('This is Edge browser');
} else {
    console.log('Unknown browser');
}

当用户使用Chrome浏览器时，运行结果如下：