有你在真好 的个人博客
Vue实战042：获取客户端浏览器以及操作系统信息
阅读：2733 添加日期：2021/3/27 23:16:10 原文链接：https://www.toutiao.com/item/6721479790525694471/

前言

前面我们获取了当前客户端的ip信息：Vue实战041：获取当前客户端IP地址详解（内网和外网），

为了更好的为客户提供需求，很多时候我们会根据用户的客户端信息来提供不同的服务，比如外卖、旅游行业会根据用户所在的位置推荐附近的商家，电商会根据用户的浏览记录来推荐商品、还有写国际网站会根据用户的系统语言来提供不同的语言系统等等，这些都是建立在已知客户端基本信息来实现的，今天继续获取当前用户的浏览器以及电脑操作系统等信息。

Vue实战042：获取客户端浏览器以及操作系统信息

Navigator

Navigator 是一个Browser 对象，包含有关浏览器的信息，虽然没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。它包含了浏览器的很多信息，比如浏览器代码名、名称、平台、版本信息、语言、操作系统平台等等，你想要的信息基本都在这里，具体如图所示：

Vue实战042：获取客户端浏览器以及操作系统信息

直接获取的信息

需要注意的是，每个浏览器的Navigator对象所包含的属性并不相同，所以我们这里举例的并不是Navigator的所有属性。通过navigator对象可以直接获取到部分信息，比如说appCodeName（代码名）、appName（浏览器名）、appVersion（浏览器版本）、languages（浏览器语言组）、plugins（插件组）、product（产品名）、productSub（浏览器的编译版本号）、vendor（ 制作浏览器的公司）、language（系统语言）、deviceMemory（系统内存）、hardwareConcurrency（系统CPU线程数）、platform（系统平台）等，虽然以上很多信息都可以直接获取，这里我觉得以下信息可以参考。

let cookieEnabled=navigator.cookieEnabled //用户浏览器是否启用了cookie
let language= navigator.language //用户操作系统上设置的语言
let deviceMemory = navigator.deviceMemory //用户操作系统内存
let hardwareConcurrency = navigator.hardwareConcurrency //用户操作系统CPU线程数

间接获取的信息

顾名思义，就是需要经过处理才能拿到的数据，这里最主要的数据来源就是Navigator.userAgent，这里声明了浏览器用于 HTTP 请求的用户代理的值。

userAgent:'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36'

userAgent解析

User-Agent 是一串字符串，格式为：应用名/版本号。从这里我们可以获取到浏览器类型、版本信息和操作系统信息。就拿上面这个User-Agent来解析吧，我们分开来说明吧：

Mozilla/5.0 是网景公司浏览器的标识，用于伪装成Mozilla排版引擎以达到兼容。

(Windows NT 10.0; Win64; x64) 括号中包含了当前浏览器所运行的操作系统信息，这里可以看出我的电脑是Win10 64位的。

AppleWebKit/531.21.10 说明该浏览器利用了苹果公司开发的呈现引擎。

(KHTML, like Gecko) Linux平台中呈现引擎KHTML，like Gecko表示引擎与Gecko类似。

Chrome/74.0.3729.157 这个是浏览器信息以及版本信息或者浏览器内核信息和版本

Vue实战042：获取客户端浏览器以及操作系统信息

获取Windows 操作系统信息

（Windows NT 10.0; Win64; x64）包含了操作系统版本和平台信息，不同版本的系统对应的 Windows NT不同，这里我们可以通过判断 Windows NT来得到操作系统信息。windows nt 5.0对应Win2000、windows nt 5.1对应WinXP、windows nt 5.2对应Win2003、windows nt 6.0对应WinVista、windows nt 6.1对应Win7、windows nt 6.2对应Win8、windows nt 10.0对应Win10，创建个列表来存储这里信息，然后遍历列表来匹配userAgent中的信息，并返回对应的值（toLocaleLowerCase()将字母转小写）。

getWin(){
 let userAgent = navigator.userAgent.toLocaleLowerCase() //toLocaleLowerCase()将字母转小写
 let wins = [
 {
 sys:'windows nt 5.0',
 alias:'windows 2000',
 name:'Win2000'
 },
 {
 sys:'windows nt 5.1',
 alias:'windows xp',
 name:'WinXP'
 },
 {
 sys:'windows nt 5.2',
 alias:'windows 2003',
 name:'Win2003'
 },
 {
 sys:'windows nt 6.0',
 alias:'Windows Vista',
 name:'WinVista'
 },
 {
 sys:'windows nt 6.1',
 alias:'Windows 7',
 name:'Win7'
 },
 {
 sys:'windows nt 6.2',
 alias:'Windows 8',
 name:'Win8'
 },
 {
 sys:'windows nt 10.0',
 alias:'Windows 10',
 name:'Win10'
 },
 ]
 for(let win of wins){
 if( userAgent.indexOf(win.sys)>-1 || userAgent.indexOf(win.alias)>-1 ){
 return win.name
 }
 }
 }

上面只是获取Windows的操作系统信息，同样我们也可以获取移动端的信息，这时候Windows NT这显示的就是其他信息了，如android、iphone、ipad、windows phone、symbianos等等，这些比Windows就简单多了没那么多版本，直接if (userAgent.indexOf('android') > -1) return 'Android'就可以了。

if (userAgent.indexOf('android') > -1) return 'Android'
if (userAgent.indexOf('iphone') > -1) return 'iPhone'
if (userAgent.indexOf('ipad') > -1) return 'iPad'
if (userAgent.indexOf('windows phone') > -1) return 'Windows Phone'
if (userAgent.indexOf('symbianos') > -1) return 'SymbianOS'

获取系统位数

这里就比较简单了，不是32位就是64位了，直接判断userAgent中是否含有该字段就可了，由于浏览器之间的差异，有时候可能是win64，也可能是wow64，所以加个或判断就万无一失了。

getEdition(){
 var userAgent = navigator.userAgent.toLocaleLowerCase()
 if( userAgent.indexOf("win64") > -1|| userAgent.indexOf("wow64") > -1){
 return '64位'
 }else{
 return '32位'
 }
}

获取浏览器信息

市面上的浏览器种类很多，精确到是哪款浏览器我们就需要了解各个浏览器的命名规则，如欧朋为opera、火狐为firefox、Edge为edge、谷歌为chrome、Safari为safari等等，还有很多国产浏览器，基于chrome开发的在userAgent中显示的可能就是chrome了，所以判断起来考虑的还是很多的。同样我们可以定义个列表来存储不同浏览器的命名，然后拿着这些命名规格去userAgent匹配是否存在，这里我们通过forEach对types进行遍历，然后通过正则将浏览器规格和版本给取出来。

getBrowser(){
 let types = ['edge','firefox','chrome','safari','opera '] //定义浏览器名称
 let userAgent = navigator.userAgent.toLocaleLowerCase()
 var res=[] //存储返回值
 types.forEach(element => {
 if(userAgent.indexOf(element)>0){
 let rule= `${element}`+"\\/([\\d.]+)" //匹配正则
 res.push({'name':element,'version':userAgent.match(rule)[1]})
 }
 })
 return res
}

这里我们会发现，我的结果中会存在多个值，为什么含有Chrome/74.0.3729.157又有Safari/537.36呢，我们看到userAgent含有AppleWebKit引擎，而这个是Apple开发的，为了获得服务器端的正确响应，所以在userAgent追加了Safari信息，那么如何区别Chrome和Safari呢，当userAgent中只有Safari即为Safari浏览器，如果同时含有Chrome和Safari则为谷歌浏览器或者谷歌内核浏览器，这里大致处理了下常用的浏览器，如果使用基于Chrome的国产浏览器还可以继续细分判断。

getBrowser(){
 let types = ['edge','firefox','chrome','safari','opera ']
 let userAgent = navigator.userAgent.toLocaleLowerCase()
 var res=[]
 types.forEach(element => {
 if(userAgent.indexOf(element)>0){
 let rule= `${element}`+"\\/([\\d.]+)" 
 res.push(element)
 res.push(userAgent.match(rule)[1])
 }
 })
 if(res.indexOf('chrome') >-1 && res.indexOf('safari') >-1){
 if(res.length===4){
 let temp=[]
 temp.push('chrome')
 temp.push(res[res.indexOf('chrome')+1])
 return temp
 }else{
 res.splice(res.indexOf('chrome'),2)
 res.splice(res.indexOf('safari'),2)
 return res
 }
 }else{
 return res
 } 
}

总结：

这篇主要是要过滤很多信息，还有就是浏览器种类很多，要想都区分出来是个很精细的活，同时也要去了解不同浏览器在userAgent中时如何定义的。我这里为了方便统一用列表来存浏览器命名了，这里扩展的时候就比较方便了。如果你想更精细的判断，我这思路已经铺好了，你可以在我的基础上继续优化和改进（包括系统的判断也可以再完善下）。

欢迎关注本人的公众号：编程手札，文章也会在公众号更新

Vue实战042：获取客户端浏览器以及操作系统信息

ICP备案号：苏ICP备14035786号-1 苏公网安备 32050502001014号