封装获取操作系统和浏览器类型的方法

获取操作系统和浏览器版本

在做博客的时候获取评论者的操作系统和浏览器版本，提交评论的时候需要传入一下参数：

let data=await this.updateComment({
  author_name: this.ruleForm.name,
  author_email: this.ruleForm.email,
  author_url: this.ruleForm.website,
  content: this.ruleForm.content.replace(/([[a-zA-Zd]+])/g, ' $1 '),
  post: this.$route.params.id,
  author_user_agent: navigator.userAgent
})

发表的时候把navigator.userAgent传过去，其中这个值为：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36
然后根据这个值获取评论者的操作系统和浏览器
定义一个类，将这个值传进去获取到具体的：

class systemAndBrowserInfo {
  constructor(userAgent) {
    this.agent=userAgent
    this.result={}
    this.init()

    return this.result
  }
  init(){
    this.getSystemName()
    this.getBrowserName()
  }

  //获取系统版本
  getSystemName(){
    let systemName=""
    if (this.agent.indexOf("Windows NT 10.0")!== -1){
      systemName="Windows 10"
    }else if(this.agent.indexOf("Windows NT 6.2")!== -1){
      systemName="Windows 8"
    }else if(this.agent.indexOf("Windows NT 6.1")!== -1){
      systemName="Windows 7"
    }else if(this.agent.indexOf("Windows NT 6.0")!== -1){
      systemName="Windows Vista"
    }else if(this.agent.indexOf("Windows NT 5.1")!== -1){
      systemName="Windows XP"
    }else if(this.agent.indexOf("Windows NT 5.0")!== -1){
      systemName="Windows 2000"
    }else if(this.agent.indexOf("Mac")!== -1){
      systemName="Mac"
    }else if(this.agent.indexOf("X11")!== -1){
      systemName="UNIX"
    }else if(this.agent.indexOf("Linux")!== -1){
      systemName="Linux"
    }else if(this.agent.indexOf("iPhone")!== -1){
      systemName="iPhone"
    }else if(this.agent.indexOf("Android")!== -1){
      systemName="Android"
    }else{
      systemName = "other";
    }
    this.result.systemName=systemName
  }

  //浏览器系统版本
  getBrowserName(){
    // 需要匹配的浏览器名称
    const browserNameList = ['MicroMessenger', 'QQBrowser', 'UCBrowser', 'Edge', 'OPR', 'Vivaldi', 'Firefox', 'Chrome', 'Safari']
    const regexp = browserNameList.map(name => new RegExp(`${name}\/(\d+\.)+\d+`))
    // 过滤浏览器信息
    let browser = this.agent.match(/[a-z]+/(d+.)+d+/ig).filter(_ => regexp.findIndex(v => v.test(_)) !== -1)
    // 如果最后一项不是Safari并且结果长度大于1取最后一项为当前浏览器信息
    browser = browser.length > 1 && !/^Safari/.test(browser[browser.length - 1]) ? browser.reverse() : browser
    this.result = {
      ...this.result,
      ...this.browserVersionFormat(browser[0])
    }
  }
  browserVersionFormat(str){
    if (!str){
      return {
        browserName: 'Unknown',
        browserVersion: 'Unknown'
      }
    }
    const BROWSER_NAMES = {
      QQBrowser: 'QQ浏览器',
      UCBrowser: 'UC浏览器',
      MicroMessenger: '微信',
      Edge: 'Edge',
      OPR: 'Opera',
      Vivaldi: 'Vivaldi',
      Firefox: 'Firefox',
      Chrome: 'Chrome',
      Safari: 'Safari'
    }
    try {
      const [, name, version] = str.match(/([a-z]+)/(d+.d+)/i)
      return {
        browserName: BROWSER_NAMES[name],
        browserVersion: version,
        browserEnName: name
      }
    } catch (error) {
      console.log(`[getBrowserInfo Error] ${error}`)
    }
  }

}

export default agent =>new systemAndBrowserInfo(agent)

使用的时候npm install之后在哪里使用就在哪里引入：

import getBrowserInfo from "dylan-browser-info"  
let item=getBrowserInfo(userAgentInfo.userAgent)  
//item中的键值对为：  
browserEnName: "Chrome"
browserName: "Chrome"
browserVersion: "80.0"
systemName: "Windows 10"

封装获取操作系统和浏览器类型的方法

获取操作系统和浏览器版本

相关推荐