JS之BOM篇navigator对象

navigator对象常用于识别客户端浏览器

属性

每个浏览器中的navigator对象都有一套自己的属性

属性                    说明

appCodeName             浏览器名称[所有浏览器都返回Mozilla]
userAgent               浏览器的用户代理字符串
appVersion              浏览器版本
appMinorVersion         次版本信息[IE返回0，chrome和firefox不支持]
platform                浏览器所在的系统平台[所有浏览器都返回Win32]
plugins                 浏览器中安装的插件信息的数组
mimeTypes               在浏览器中注册的MIME类型数组

language                浏览器主语言[IE10-不支持，其他浏览器返回zh-CN]
systemLanguage          操作系统语言[IE返回zh-CN，chrome和firefox不支持]
userLanguage            操作系统默认语言[IE返回zh-CN，chrome和firefox不支持]
product                 产品名称[IE10-不支持，其他浏览器返回Gecko]
productSub              产品次要信息[IE不支持，chrome返回20030107，firefox返回20100101]
vendor                  浏览器品牌[chrome返回Google Inc.，IE和firefox不支持]
onLine                  是否连接因特网[IE根据实际情况返回true或false，chrome和firefox始终返回true]

cookieEnabled           表示cookie是否启用[所有浏览器都返回true]
javaEnabled             是否启用java[IE8-浏览器返回{}，其他浏览器返回function javaEnabled()]
buildID                 浏览器编译版本[firefox返回20170125094131，chrome和IE不支持]
cpuClass                计算机使用的CPU类型[IE返回x86，chrome和firefox不支持]
oscpu                   操作系统或使用的CPU[firefox返回Windows NT 10.0; WOW64，chrome和IE不支持]

navigator对象有很多属性，最常用的只有userAgent属性，常用于实现用户代理检测。

用户代理检测

不同平台下浏览器的userAgent检测结果

【IE3】

Mozilla/2.0 (compatible; MSIE3.02; windows 95)

【IE6】

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

【IE7】

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)

【IE8】

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

【IE9】

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

【IE10】

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

【IE11】

Mozilla/5.0 (MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; GWX:QUALIFIED; rv:11.0) like Gecko

【chrome】

Mozilla/5.0 (Windows NT 6.1; WOW64)G AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36

【safari】

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

【firefox】

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0

【opera】

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36 OPR/32.0.1948.25

【ipad】

Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

【iphone】

Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4

【android】

Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36

识别内核

常见的内核有Trident、Gecko和WebKit

function whichEngine(){
  var ua = navigator.userAgent;
  //Trident内核
  if(/Trident/.test(ua)){
      return "Trident";
  }
  //Webkit内核
  if(/WebKit/.test(ua)){
      return "WebKit";
  }        
  //Gecko内核
  if(/Gecko/.test(ua)){
      return "Gecko";
  }
}
// IE11下显示"Trident"
// chrome下显示"WebKit"
// firefox下显示"Gecko"

注意： 因为Trident和WebKit的用户代理字符串中可能会出现like Gecko的字眼，所以需要最后再测Gecko

识别浏览器

IE

function isIE() {
  var ua = navigator.userAgent;
  //检测Trident引擎，IE8+
  if (/Trident/.test(ua)) {
    //IE11+
    if (/rv:(\d+)/.test(ua)) {
      return RegExp["$1"];
    }
    //IE8-IE10    
    if (/MSIE (\d+)/.test(ua)) {
      return RegExp["$1"];
    }
  }
  //检测IE标识，IE7-
  if (/MSIE (\d+)/.test(ua)) {
    return RegExp["$1"];
  }
}
console.log(isIE()); // 只有IE会返回版本号，其他浏览器都返回undefined

chrome

function isChrome() {
  var ua = navigator.userAgent;
  //先排除opera,因为opera只是在chrome的userAgent后加入了自己的标识
  if (!/OPR/.test(ua)) {
    if (/Chrome\/(\S+)/.test(ua)) {
      return RegExp["$1"];
    }
  }
}
console.log(isChrome()); // 只有Chrome会返回版本号，其他浏览器都返回undefined

safari

function isSafari() {
  var ua = navigator.userAgent;
  //先排除opera
  if (!/OPR/.test(ua)) {
    //检测出chrome和safari浏览器
    if (/Safari/.test(ua)) {
      //检测出safari
      if (/Version\/(\S+)/.test(ua)) {
        return RegExp["$1"];
      }
    }
  }
}
console.log(isSafari()); // 只有safari会返回版本号，其他浏览器都返回undefined

firefox

function isFireFox() {
  if (/Firefox\/(\S+)/.test(navigator.userAgent)) {
    return RegExp["$1"];
  }
}
console.log(isFireFox()); // 只有firefox会返回版本号，其他浏览器都返回undefined

opera

function isOpera() {
  if (/OPR\/(\S+)/.test(navigator.userAgent)) {
    return RegExp["$1"];
  }
}
console.log(isOpera()); // 只有opera会返回版本号，其他浏览器都返回undefined

识别操作系统

function whichSystem() {
  var ua = navigator.userAgent;
  var pf = navigator.platform;
  if (/Mac/.test(pf)) {
    return "Mac";
  }
  if (/X11/.test(pf) || /Linux/.test(pf)) {
    return "Linux";
  }
  if (/Win/.test(pf)) {
    if (/Windows NT (\d+\.\d+)/.test(ua)) {
      switch (RegExp["$1"]) {
        case "5.0":
          return "Windows 2000";
        case "5.1":
          return "Windows XP";
        case "6.0":
          return "Windows Vista";
        case "6.1":
          return "Windows 7";
        case "6.2":
          return "Windows 8";
        case "6.3":
          return "Windows 8.1";
        case "6.4":
        case "10.0":
          return "Windows 10";
      }
    }
  }
}
console.log(whichSystem()) // Windows 10

识别移动端

function whichMobile() {
  var ua = navigator.userAgent;
  if (/iPhone OS (\d+_\d+)/.test(ua)) {
    return 'iPhone' + RegExp.$1.replace("_", ".");
  }
  if (/iPad.+OS (\d+_\d+)/.test(ua)) {
    return 'iPad' + RegExp.$1.replace("_", ".")
  }
  if (/Android (\d+\.\d+)/.test(ua)) {
    return 'Android' + RegExp["$1"];
  }
}
console.log(whichMobile()) // Android6.0