BOM之navigator對象和使用者代理程式檢測，bomnavigator

BOM之navigator對象和使用者代理程式檢測，bomnavigator

前面的話

navigator對象現在已經成為識別用戶端瀏覽器的事實標準，navigator對象是所有支援javascript的瀏覽器所共有的。本文將詳細介紹navigator對象和使用者代理程式檢測

屬性

與其他BOM對象的情況一樣，每個瀏覽器中的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不支援]

檢測外掛程式

檢測瀏覽器外掛程式是一種最常見的檢測常式

對於非IE瀏覽器，可以使用plugins數組來達到這個目的該數組中的每一項都包含下列屬性

name:外掛程式的名字　

description:外掛程式的描述

filename:外掛程式的檔案名稱

length:外掛程式所處理的MIME類型數量

通過迴圈迭代每個外掛程式並將外掛程式的name與給定的名字進行比較

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;  } }}//檢測flashconsole.log(hasPlugin("Flash"));//true

對於IE瀏覽器，檢測外掛程式的辦法是使用專有的ActiveXObject類型，並嘗試建立一個特定外掛程式的執行個體。IE是使用COM對象來實現外掛程式的，而COM對象使用唯一識別碼來標識。因此，想檢查特定的外掛程式就必須知道其COM標識符。例如，Flash的標識符是ShockwaveFlash.ShockwaveFlash

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

【相容寫法】

//檢測非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;  } }}//檢測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

使用者代理程式檢測

navigator對象中最重要的作用就是使用useragent實現使用者代理程式檢測。使用者代理程式檢測是一種萬不得已的做法，優先順序排在前面介紹過的能力檢測之後

發展曆史

1、1993年美國NCSA國家超級電腦中心發布了世界上第一款web瀏覽器Mosaic，該瀏覽器的使用者代理程式字串為Mosaic/0.9

2、Netscape公司進入瀏覽器開發領域，將自己產品的代號定名了Mozilla(Mosaic Killer)的簡寫，使用者代理程式字串格式為Mozilla/版本號碼 [語言] (平台；加密類型)

3、IE贏得使用者廣泛認可的web瀏覽器IE3發布時，Netscape已經佔據了絕對市場份額，為了讓伺服器能夠檢測到IE，IE將使用者代理程式字串修改成相容Netscape的形式：Mozilla/2.0(compatible;MSIE版本號碼；作業系統)

4、各瀏覽器陸續出現，使用者代理程式字串的顯示格式也越來越類似……

HTTP規範明確規定，瀏覽器應該發送簡短的使用者代理程式字串，指明瀏覽器的名稱和版本號碼。但現實中卻沒有這麼簡單，各瀏覽器的檢測結果如下所示

檢測結果

【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

[注意]因為Trident和Webkit的使用者代理程式字串中可能會出現like Gecko的字眼，所以最後再測Gecko

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"; }}console.log(whichEngine());//IE11下顯示"Trident"

識別瀏覽器

【1】IE

  IE3-IE10都可以通過MSIE的版本號碼來判斷，因為有的IE11並不出現MSIE字元，且safari中也有rv欄位，所以IE11需要通過rv後的版本號碼和Trident來配合判斷

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

【2】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會返回版本號碼45.0.2454.93，其他瀏覽器都返回undefined

【3】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會返回版本號碼5.1.7，其他瀏覽器都返回undefined

【4】firefox

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

【5】opera

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

識別作業系統

使用navigator.platform檢測作業系統更加簡單，因為其可能包括的值為“Win32”、“Win64”、“MacPPC”、“MacIntel”、“X11”和"Linux i686"等，且在不同瀏覽器中是一致的

而通過navigator.userAgent可以來得到window系統的詳細資料

windows版本      ->    核心版本Windows XP      ->    5.1Windows Vista      ->    6.0Windows 7       ->    6.1Windows 8       ->    6.2Windows 8.1      ->    6.3Windows 10技術預覽版    　 ->    6.4Windows 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

識別移動端

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

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的協助，同時也希望多多支援幫客之家！