python脚本

前端是如何通过navigator.userAgent检测浏览器的？

发表于 2021年12月27日阅读 2559 评论 0

前端是如何通过navigator.userAgent检测浏览器的？对于前端来说，浏览器检测已经不陌生了，在做一些页面时，需要针对不同的浏览器进行处理不同的逻辑，最简单的就是区分pc和移动端的浏览器，或是android 和ios下的浏览器。

一、浏览器检测的由来？

在20世纪90年代初期，网景公司开发的 Netscape Navigator开始流行起来，随后便产生的浏览器大战，主要在于两大巨头之间（Netscape/微软ie）；由于那时各家浏览器都有自己的标准，使用内核也不一样，各个版本之间也存在差异（万恶的IE）；造成网页开发者需要针对不同的浏览器进行适配。后期产生了大量的浏览器厂商，各自都拥有自己的浏览器了，但是主要内核还是还是掌握在巨头公司里；
浏览器内核及常见浏览器：

trident（IE内核）：IE、360安全浏览器、猎豹安全浏览器、傲游浏览器、百度浏览器
gecko（Firefox内核）：Mozilla FireFox(火狐浏览器)
webkit（苹果内核）：Safari、Chrome

其中我们国内大部分浏览器基本都是使用双内核（trident + webkit），当你开启高速模式时，就是切换使用了webkit内核；当然不能一概而论，有些新版本使用了google研发的新的排版引擎 blink

二、navigator.userAgent产生？

navigator.userAgent最初是有网景公司的Netscape Navigator流行后，后续浏览器跟随网景公司的格式进行模仿，例如，Netscape Navigator 3 发布不久，微软公布了它的首款 web 浏览器： IE 3，但是 Netscape 是当时首选浏览器，大多数服务器在加载页面前都会检查 user-agent 是否为该款浏览器。IE 如果不兼容Netscape user-agent 字串，使用 IE 的用户就根本打不开这些页面，于是造就了如下格式： Mozilla/2.0 (compatible; MSIE 3.02; Windows 95) 结果就是 IE 摇身一变被识别成了 Mozilla，伪装成 Netscape Navigator，这就是如今大家查看大部分浏览器的userAgen 字段中都会有“Mozilla/5.0”这样的字符；

三、navigator.userAgent 格式

因为各大浏览器厂商在进行设置 userAgent 时都有自己的小心思，导致了userAgent 的格式也非常的混乱；比如上面说到的IE，为了能让IE用户可以访问那时火热的Netscape Navigator页面，就伪装成了Netscape；苹果公司在开发webkit 内核时，一个新的浏览器，怎么样才能破解这个被别人占领的市场呢，那就是使用IE那一套，在userAgent中放了详细的信息，伪装成了即兼容Mozilla又兼容Gecko内核的Firefox浏览器；

部分浏览器格式如下（PC）：

chrome浏览器：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
IE11浏览器：Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; McAfee; rv:11.0) like Gecko
safari 5.1 – MAC：User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50
safari 5.1 – Windows：User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-us) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50
Firefox 4.0.1 – MAC：User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
Firefox 4.0.1 – Windows：User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
Opera 11.11 – MAC：User-Agent:Opera/9.80 (Macintosh; Intel Mac OS X 10.6.8; U; en) Presto/2.8.131 Version/11.11
Opera 11.11 – Windows：User-Agent:Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11
360浏览器：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; 360SE)
搜狗浏览器 1.x：User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; SE 2.X MetaSr 1.0; SE 2.X MetaSr 1.0; .NET CLR 2.0.50727; SE 2.X MetaSr 1.0)

部分浏览器格式如下（移动端）：

iphone6：Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
ipad：Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
Android QQ浏览器 For android：User-Agent: MQQBrowser/26 Mozilla/5.0 (Linux; U; Android 2.3.7; zh-cn; MB200 Build/GRJ22; CyanogenMod-7) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Windows Phone：User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; HTC; Titan)
BlackBerry：User-Agent: Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.337 Mobile Safari/534.1+
UC标准：User-Agent: NOKIA5700/ UCWEB7.0.2.37/28/999

四、解析userAgent进行浏览器检测

通过观察各浏览器的userAgent字段，可以从中进行细分浏览器类型；例如：

PC与移动端的区分
主要是根据userAgent中包含的系统字符进行判断，比如桌面系统主要包含：windows/mac/cros/linux ; 而移动端比较复杂，不能简单区分Android/ios，比如还有ipad/kindle/blackbary/windows phone等；具体参考browser.js中的检测方式：

var platform_match = /(ipad)/.exec( ua ) || /(ipod)/.exec( ua ) || /(windows phone)/.exec( ua ) || // 区分windows phone手机 /(iphone)/.exec( ua ) || /(kindle)/.exec( ua ) || // 亚马逊的 kindle /(silk)/.exec( ua ) || // 亚马逊的 silk 浏览器 /(android)/.exec( ua ) || /(win)/.exec( ua ) || // windows 系统，注意必须放在检测 windows phone 手机之后 /(mac)/.exec( ua ) || /(linux)/.exec( ua ) || /(cros)/.exec( ua ) || /(playbook)/.exec( ua ) || // 黑莓的 playbook浏览器 /(bb)/.exec( ua ) || // 黑莓手机 /(blackberry)/.exec( ua ) || // 黑莓手机 [];
```
// mobile 检测
 if ( browser.android || browser.bb || browser.blackberry || browser.ipad || browser.iphone ||
  browser.ipod || browser.kindle || browser.playbook || browser.silk || browser[ "windows phone" ]) {
  browser.mobile = true;
}

// pc 检测
 if ( browser.cros || browser.mac || browser.linux || browser.win ) {
  browser.desktop = true;
}
```
浏览器类型检测，都是使用正则进行检测关键字，具体参考 browser.js

var match = /(edge)\/([\w.]+)/.exec( ua ) || /(opr)\//.exec( ua ) || /(chrome) \//.exec( ua ) || /(iemobile)\//.exec( ua ) || /(version)(applewebkit) \/.(safari) \//.exec( ua ) || /(webkit) \/.(version) \/.(safari) \//.exec( ua ) || /(webkit) \//.exec( ua ) || /(opera)(?:.version|) \//.exec( ua ) || /(msie) ([\w.]+)/.exec( ua ) || ua.indexOf("trident") >= 0 && /(rv)(?::| )([\w.]+)/.exec( ua ) || ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) || [];

五、精准度？

通过userAgent判断可以区分大部分浏览器，但是少数浏览器该字段的检测会带来误区，特别是国内浏览器，开发页面时需要针对具体的浏览器进行区分嗅探；

【参考链接】

①、browser.js : https://cdn.bootcss.com/jquery-browser/0.1.0/jquery.browser.js

②、python3 随机代理：https://www.h3blog.com/article/python3-useragent/

版权声明：如无特殊说明，文章均为何三笔记原创，转载请注明出处

本文链接：http://www.h3blog.com/article/308/

一、浏览器检测的由来？
二、navigator.userAgent产生？
三、navigator.userAgent 格式
四、解析userAgent进行浏览器检测
五、精准度？