BOM之navigator对象和用户代理检测
前面的話
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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深入理解闭包系列第五篇——闭包的10种形
- 下一篇： 深入理解表单脚本系列第一篇——表单对象