前言

前面我们获取了当前客户端的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中时如何定义的。我这里为了方便统一用列表来存浏览器命名了，这里扩展的时候就比较方便了。如果你想更精细的判断，我这思路已经铺好了，你可以在我的基础上继续优化和改进（包括系统的判断也可以再完善下）。