如何使用 Navigator.userAgent -- 获取客户端模型、浏览器模型的方法

最编程 2024-04-07 08:04:59

...

来源： www.haorooms.com/post/js_wd_…
www.haorooms.com/post/js_nav… blog.****.net/xuebimi/art…

1、什么是Navigator

Navigator对象是包含有关 浏览器 的信息。

属性	描述	IE	F	O
appCodeName	返回浏览器的代码名。	4	1	9
appMinorVersion	返回浏览器的次级版本。	4	No	No
appName	返回浏览器的名称（公司名：如网景）。	4	1	9
appVersion	返回浏览器的平台和版本信息。	4	1	9
browserLanguage	返回当前浏览器的语言。	4	No	9
cookieEnabled	返回指明浏览器中是否启用	cookie 的布尔值。	4	1
cpuClass	返回浏览器系统的 CPU 等级。	4	No	No
onLine	返回指明系统是否处于脱机模式的布尔值。	4	No	No
platform	返回运行浏览器的操作系统平台。（如Win32）	4	1	9
systemLanguage	返回 OS 使用的默认语言。	4	No	No
userAgent	返回由客户机发送服务器的 user-agent 头部的值。	4	1	9
userLanguage	返回 OS 的自然语言设置。	4	No	9

2、Navigator.userAgent的组成部分

userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/
13.0.3 Mobile/15E148 Safari/604.1 为例子

Mozilla/	5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/ 605.1.15 (KHTML, like Gecko) Version/ 13.0.3 Mobile/ 15E148 Safari/ 604.1
appCodeName浏览器的代码名。	appVersion 返回浏览器的平台和版本信息

因此在Navigator.userAgent出现的某些字段则有以下含义

字段	含义
msie	浏览器型号: IE11以下
trident & rv	浏览器型号: IE11版本中不包括MSIE字段
firefox	浏览器型号: firefox
chrome	浏览器型号: chrome
safari	浏览器型号: safari
MicroMessenger	浏览器型号: 微信浏览器
iPhone	客户端型号: 为苹果手机或ipad
Macintosh	客户端型: 为苹果电脑Mac
Mac OS X	客户端型号: IOS产品
Android	客户端型号: Android移动端产品
windows nt 5.0	客户PC端系统版本: Windows 2000
windows nt 5.1 / windows nt 5.2	客户PC端系统版本: Windows XP
windows nt 6.0	客户PC端系统版本: Windows Vista
windows nt 6.1 / windows 7	客户PC端系统版本: Windows 7
windows nt 6.2 / windows 8 / windows nt 6.3	客户PC端系统版本: Windows 8
windows nt 10.0	客户PC端系统版本: Windows 10

3、使用方法

根据上面的关键字按所需要的过滤的内容自行封装函数

例子：
        function getBrowserInfo() {
            var agent = navigator.userAgent.toLowerCase();
            //IE11以下
            if (agent.indexOf("msie") > 0) {
                return agent.match(regStr_ie);
                //   console.log(agent)
            }
            //IE11版本中不包括MSIE字段
            if (agent.indexOf("trident") > 0 && agent.indexOf("rv") > 0) {
                return "IE " + agent.match(/rv:(\d+\.\d+)/)[1];
            }
            //firefox
            if (agent.indexOf("firefox") > 0) {
                return agent.match(regStr_ff);
            }
            //Chrome
            if (agent.indexOf("chrome") > 0) {
                return agent.match(regStr_chrome);
            }
            //Safari
            if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
                return agent.match(regStr_saf);
            }
        }

4、封装方式

以获取IP、地区、浏览器、操作系统为例
在index.html中添加搜狐接口的引用

    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script type="text/javascript">
    sessionStorage.setItem('ip', returnCitySN["cip"])
    sessionStorage.setItem('area', returnCitySN["cname"])
    </script>

在aseets的js文件夹下systemTool.js文件, 内容如下

export function GetCurrentBrowser () {
  let ua = navigator.userAgent.toLocaleLowerCase()
  let browserType = null
  if (ua.match(/msie/) != null || ua.match(/trident/) != null) {
    browserType = 'IE'
  } else if (ua.match(/firefox/) != null) {
    browserType = 'firefox'
  } else if (ua.match(/ucbrowser/) != null) {
    browserType = 'UC'
  } else if (ua.match(/opera/) != null || ua.match(/opr/) != null) {
    browserType = 'opera'
  } else if (ua.match(/bidubrowser/) != null) {
    browserType = 'baidu'
  } else if (ua.match(/metasr/) != null) {
    browserType = 'sougou'
  } else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
    browserType = 'QQ'
  } else if (ua.match(/maxthon/) != null) {
    browserType = 'maxthon'
  } else if (ua.match(/chrome/) != null) {
    var is360 = _mime('type', 'application/vnd.chromium.remoting-viewer')
    if (is360) {
      browserType = '360'
    } else {
      browserType = 'chrome'
    }
  } else if (ua.match(/safari/) != null) {
    browserType = 'Safari'
  } else {
    browserType = 'others'
  }
  return browserType
}
 
function _mime (option, value) {
  var mimeTypes = navigator.mimeTypes
  for (var mt in mimeTypes) {
    if (mimeTypes[mt][option] === value) {
      return true
    }
  }
  return false
}
 
// get os
export function GetOs () {
  let sUserAgent = navigator.userAgent.toLocaleLowerCase()
  let isWin = (navigator.platform === 'win32') || (navigator.platform === 'windows')
  let isMac = (navigator.platform === 'mac68k') || (navigator.platform === 'macppc') || (navigator.platform === 'macintosh') || (navigator.platform === 'macintel')
  if (isMac) return 'Mac'
  var isUnix = (navigator.platform === 'x11') && !isWin && !isMac
  if (isUnix) return 'Unix'
  var isLinux = (String(navigator.platform).indexOf('linux') > -1)
  if (isLinux) return 'Linux'
  if (isWin) {
    var isWin2K = sUserAgent.indexOf('windows nt 5.0') > -1 || sUserAgent.indexOf('windows 2000') > -1
    if (isWin2K) return 'Win2000'
    var isWinXP = sUserAgent.indexOf('windows nt 5.1') > -1 || sUserAgent.indexOf('windows xp') > -1
    if (isWinXP) return 'WinXP'
    var isWin2003 = sUserAgent.indexOf('windows nt 5.2') > -1 || sUserAgent.indexOf('windows 2003') > -1
    if (isWin2003) return 'Win2003'
    var isWinVista = sUserAgent.indexOf('windows nt 6.0') > -1 || sUserAgent.indexOf('windows vista') > -1
    if (isWinVista) return 'WinVista'
    var isWin7 = sUserAgent.indexOf('windows nt 6.1') > -1 || sUserAgent.indexOf('windows 7') > -1
    if (isWin7) return 'Win7'
  }
  if (sUserAgent.indexOf('android') > -1) return 'Android'
  if (sUserAgent.indexOf('iphone') > -1) return 'iPhone'
  if (sUserAgent.indexOf('symbianos') > -1) return 'SymbianOS'
  if (sUserAgent.indexOf('windows phone') > -1) return 'Windows Phone'
  if (sUserAgent.indexOf('ipad') > -1) return 'iPad'
  if (sUserAgent.indexOf('ipod') > -1) return 'iPod'
  return 'others'
}

使用，在需要的vue组件中引用上一步js文件

import * as sysTool from '../assets/js/systemTool'


data () {
  return {
      ip: '1.1.1.1',
      area: '北京市',
      brower: 'chrome',
      os: 'windows7'
  }
}

//使用方法
   this.ip = sessionStorage.getItem('ip')
          this.area = sessionStorage.getItem('area')
          this.brower = sysTool.GetCurrentBrowser()
          this.os = sysTool.GetOs()
          console.log('ip，地区，浏览器，操作系统，：',  this.ip, this.area,this.brower, this.os)

blog.****.net/xuebimi/art…

上一篇：为什么很多时候家里没有人住，但水表的读数却还在？

下一篇：无刷电子调速器基础知识和 BLHeli 固件烧录与参数调整