BOM之navigator對(duì)象和用戶代理檢測(cè)

前面的話

navigator對(duì)象現(xiàn)在已經(jīng)成為識(shí)別客戶端瀏覽器的事實(shí)標(biāo)準(zhǔn)，navigator對(duì)象是所有支持javascript的瀏覽器所共有的。本文將詳細(xì)介紹navigator對(duì)象和用戶代理檢測(cè)

屬性

與其他BOM對(duì)象的情況一樣，每個(gè)瀏覽器中的navigator對(duì)象也都有一套自己的屬性。下表列出了存在于所有瀏覽器中的屬性和方法，以及支持它們的瀏覽器版本

屬性                                              說(shuō)明

appCodeName             瀏覽器名稱[所有瀏覽器都返回Mozilla]

userAgent               瀏覽器的用戶代理字符串

appVersion              瀏覽器版本

appMinorVersion         次版本信息[IE返回0，chrome和firefox不支持]

platform                瀏覽器所在的系統(tǒng)平臺(tái)[所有瀏覽器都返回Win32]

plugins                 瀏覽器中安裝的插件信息的數(shù)組

mimeTypes               在瀏覽器中注冊(cè)的MIME類型數(shù)組

language                瀏覽器主語(yǔ)言[IE10-不支持，其他瀏覽器返回zh-CN]

systemLanguage          操作系統(tǒng)語(yǔ)言[IE返回zh-CN，chrome和firefox不支持]

userLanguage            操作系統(tǒng)默認(rèn)語(yǔ)言[IE返回zh-CN，chrome和firefox不支持]

product                 產(chǎn)品名稱[IE10-不支持，其他瀏覽器返回Gecko]

productSub              產(chǎn)品次要信息[IE不支持，chrome返回20030107，firefox返回20100101]

vendor                  瀏覽器品牌[chrome返回Google Inc.，IE和firefox不支持]

onLine                  是否連接因特網(wǎng)[IE根據(jù)實(shí)際情況返回true或false，chrome和firefox始終返回true]

cookieEnabled           表示cookie是否啟用[所有瀏覽器都返回true]

javaEnabled             是否啟用java[IE8-瀏覽器返回{}，其他瀏覽器返回function javaEnabled()]

buildID                 瀏覽器編譯版本[firefox返回20170125094131，chrome和IE不支持]

cpuClass                計(jì)算機(jī)使用的CPU類型[IE返回x86，chrome和firefox不支持]

oscpu                   操作系統(tǒng)或使用的CPU[firefox返回Windows NT 10.0; WOW64，chrome和IE不支持]

檢測(cè)插件

檢測(cè)瀏覽器插件是一種最常見(jiàn)的檢測(cè)例程

對(duì)于非IE瀏覽器，可以使用plugins數(shù)組來(lái)達(dá)到這個(gè)目的該數(shù)組中的每一項(xiàng)都包含下列屬性

name:插件的名字　

description:插件的描述

filename:插件的文件名

length:插件所處理的MIME類型數(shù)量

通過(guò)循環(huán)迭代每個(gè)插件并將插件的name與給定的名字進(jìn)行比較

function hasPlugin(name){
 name = name.toLowerCase();
 for(var i = 0; i < navigator.plugins.length; i++){
  if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
   return true;
  }
 }
}
//檢測(cè)flash
console.log(hasPlugin("Flash"));//true

對(duì)于IE瀏覽器，檢測(cè)插件的辦法是使用專有的ActiveXObject類型，并嘗試創(chuàng)建一個(gè)特定插件的實(shí)例。IE是使用COM對(duì)象來(lái)實(shí)現(xiàn)插件的，而COM對(duì)象使用唯一標(biāo)識(shí)符來(lái)標(biāo)識(shí)。因此，想檢查特定的插件就必須知道其COM標(biāo)識(shí)符。例如，F(xiàn)lash的標(biāo)識(shí)符是ShockwaveFlash.ShockwaveFlash

function hasIEPlugin(name){
 try{
  new ActiveXObject(name);
  return true;
 }catch(ex){
  return false;
 }
}
//檢測(cè)Flash
console.log(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"))//true

【兼容寫法】

//檢測(cè)非IE中的插件
function hasPlugin(name){
 name = name.toLowerCase();
 for(var i = 0; i < navigator.plugins.length; i++){
  if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
   return true;
  }
 }
}
//檢測(cè)IE中的插件
function hasIEPlugin(name){
 try{
  new ActiveXObject(name);
  return true;
 }catch(ex){
  return false;
 }
}
function hasFlash(){
 var result = hasPlugin("Flash");
 if(!result){
  result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
 }
 return result;
}
console.log(hasFlash());//true

用戶代理檢測(cè)

navigator對(duì)象中最重要的作用就是使用useragent實(shí)現(xiàn)用戶代理檢測(cè)。用戶代理檢測(cè)是一種萬(wàn)不得已的做法，優(yōu)先級(jí)排在前面介紹過(guò)的能力檢測(cè)之后

發(fā)展歷史

1、1993年美國(guó)NCSA國(guó)家超級(jí)計(jì)算機(jī)中心發(fā)布了世界上第一款web瀏覽器Mosaic，該瀏覽器的用戶代理字符串為Mosaic/0.9

2、Netscape公司進(jìn)入瀏覽器開(kāi)發(fā)領(lǐng)域，將自己產(chǎn)品的代號(hào)定名了Mozilla(Mosaic Killer)的簡(jiǎn)寫，用戶代理字符串格式為Mozilla/版本號(hào) [語(yǔ)言] (平臺(tái)；加密類型)

3、IE贏得用戶廣泛認(rèn)可的web瀏覽器IE3發(fā)布時(shí)，Netscape已經(jīng)占據(jù)了絕對(duì)市場(chǎng)份額，為了讓服務(wù)器能夠檢測(cè)到IE，IE將用戶代理字符串修改成兼容Netscape的形式：Mozilla/2.0(compatible;MSIE版本號(hào)；操作系統(tǒng))

4、各瀏覽器陸續(xù)出現(xiàn)，用戶代理字符串的顯示格式也越來(lái)越類似……

HTTP規(guī)范明確規(guī)定，瀏覽器應(yīng)該發(fā)送簡(jiǎn)短的用戶代理字符串，指明瀏覽器的名稱和版本號(hào)。但現(xiàn)實(shí)中卻沒(méi)有這么簡(jiǎn)單，各瀏覽器的檢測(cè)結(jié)果如下所示

檢測(cè)結(jié)果

【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

識(shí)別內(nèi)核

常見(jiàn)的內(nèi)核有Trident、Gecko和Webkit

[注意]因?yàn)門rident和Webkit的用戶代理字符串中可能會(huì)出現(xiàn)like Gecko的字眼，所以最后再測(cè)Gecko

function whichEngine(){
 var ua = navigator.userAgent;
 //Trident內(nèi)核
 if(/Trident/.test(ua)){
  return "Trident";
 }
 //Webkit內(nèi)核
 if(/WebKit/.test(ua)){
  return "WebKit";
 }  
 //Gecko內(nèi)核
 if(/Gecko/.test(ua)){
  return "Gecko";
 }
}
console.log(whichEngine());//IE11下顯示"Trident"

識(shí)別瀏覽器

【1】IE

  IE3-IE10都可以通過(guò)MSIE的版本號(hào)來(lái)判斷，因?yàn)橛械腎E11并不出現(xiàn)MSIE字符，且safari中也有rv字段，所以IE11需要通過(guò)rv后的版本號(hào)和Trident來(lái)配合判斷

function isIE(){
 var ua = navigator.userAgent;
 //檢測(cè)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"];
  }  
 }
 //檢測(cè)IE標(biāo)識(shí)，IE7-
 if(/MSIE (\d+)/.test(ua)){
  return RegExp["$1"];
 } 
}
console.log(isIE());//只有IE會(huì)返回版本號(hào)，其他瀏覽器都返回undefined

【2】chrome

function isChrome(){
 var ua = navigator.userAgent;
 //先排除opera,因?yàn)閛pera只是在chrome的userAgent后加入了自己的標(biāo)識(shí)
 if(!/OPR/.test(ua)){
  if(/Chrome\/(\S+)/.test(ua)){
   return RegExp["$1"];
  } 
 } 
}
console.log(isChrome());//只有Chrome會(huì)返回版本號(hào)45.0.2454.93，其他瀏覽器都返回undefined

【3】safari

function isSafari(){
 var ua = navigator.userAgent;
 //先排除opera
 if(!/OPR/.test(ua)){
  //檢測(cè)出chrome和safari瀏覽器
  if(/Safari/.test(ua)){
   //檢測(cè)出safari
   if(/Version\/(\S+)/.test(ua)){
    return RegExp["$1"];
   }  
  }
 } 
}
console.log(isSafari());//只有safari會(huì)返回版本號(hào)5.1.7，其他瀏覽器都返回undefined

【4】firefox

function isFireFox(){
 if(/Firefox\/(\S+)/.test(navigator.userAgent)){
  return RegExp["$1"];
 } 
}
console.log(isFireFox());//只有firefox會(huì)返回版本號(hào)40.0，其他瀏覽器都返回undefined

【5】opera

function isOpera(){
 if(/OPR\/(\S+)/.test(navigator.userAgent)){
  return RegExp["$1"];
 } 
}
console.log(isOpera());//只有opera會(huì)返回版本號(hào)32.0.1948.25，其他瀏覽器都返回undefined

識(shí)別操作系統(tǒng)

使用navigator.platform檢測(cè)操作系統(tǒng)更加簡(jiǎn)單，因?yàn)槠淇赡馨ǖ闹禐椤癢in32”、“Win64”、“MacPPC”、“MacIntel”、“X11”和"Linux i686"等，且在不同瀏覽器中是一致的

而通過(guò)navigator.userAgent可以來(lái)得到window系統(tǒng)的詳細(xì)信息

windows版本      ->    內(nèi)核版本
Windows XP      ->    5.1
Windows Vista      ->    6.0
Windows 7       ->    6.1
Windows 8       ->    6.2
Windows 8.1      ->    6.3
Windows 10技術(shù)預(yù)覽版    　 ->    6.4
Windows 10.0　　　　　　   ->    10.0

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

識(shí)別移動(dòng)端

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())//Android 5.1

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持億速云！