有你在真好 的个人博客
Vue实战042:获取客户端浏览器以及操作系统信息
阅读:2734 添加日期: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号