前面的話

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

?

屬性

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

屬性 說明appCodeName 瀏覽器名稱[所有瀏覽器都返回Mozilla] userAgent 瀏覽器的用戶代理字符串 appVersion 瀏覽器版本 appMinorVersion 次版本信息[IE返回0，chrome和firefox不支持] platform 瀏覽器所在的系統(tǒng)平臺(tái)[所有瀏覽器都返回Win32] plugins 瀏覽器中安裝的插件信息的數(shù)組 mimeTypes 在瀏覽器中注冊(cè)的MIME類型數(shù)組language 瀏覽器主語言[IE10-不支持，其他瀏覽器返回zh-CN] systemLanguage 操作系統(tǒng)語言[IE返回zh-CN，chrome和firefox不支持] userLanguage 操作系統(tǒng)默認(rèn)語言[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è)瀏覽器插件是一種最常見的檢測(cè)例程

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

name:插件的名字　 description:插件的描述 filename:插件的文件名 length:插件所處理的MIME類型數(shù)量

　　通過循環(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ì)象來實(shí)現(xiàn)插件的，而COM對(duì)象使用唯一標(biāo)識(shí)符來標(biāo)識(shí)。因此，想檢查特定的插件就必須知道其COM標(biāo)識(shí)符。例如，Flash的標(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è)是一種萬不得已的做法，優(yōu)先級(jí)排在前面介紹過的能力檢測(cè)之后

發(fā)展歷史

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

　　2、Netscape公司進(jìn)入瀏覽器開發(fā)領(lǐng)域，將自己產(chǎn)品的代號(hào)定名了Mozilla(Mosaic Killer)的簡(jiǎn)寫，用戶代理字符串格式為Mozilla/版本號(hào) [語言] (平臺(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)，用戶代理字符串的顯示格式也越來越類似……

　　HTTP規(guī)范明確規(guī)定，瀏覽器應(yīng)該發(fā)送簡(jiǎn)短的用戶代理字符串，指明瀏覽器的名稱和版本號(hào)。但現(xiàn)實(shí)中卻沒有這么簡(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)核

　　常見的內(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都可以通過MSIE的版本號(hào)來判斷，因?yàn)橛械腎E11并不出現(xiàn)MSIE字符，且safari中也有rv字段，所以IE11需要通過rv后的版本號(hào)和Trident來配合判斷

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;//先排除operaif(!/OPR/.test(ua)){//檢測(cè)出chrome和safari瀏覽器if(/Safari/.test(ua)){//檢測(cè)出safariif(/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"等，且在不同瀏覽器中是一致的

　　而通過navigator.userAgent可以來得到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
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的BOM之navigator对象和用户代理检测的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。