BOM之navigator對象和用戶代理檢測

時間  2019-11-18
標籤 bom navigator 對象 用戶 代理 檢測 简体版
原文   原文鏈接

前面的話

　　navigator對象如今已經成爲識別客戶端瀏覽器的事實標準，navigator對象是全部支持javascript的瀏覽器所共有的。本文將詳細介紹navigator對象和用戶代理檢測javascript

 

屬性

　　與其餘BOM對象的狀況同樣，每一個瀏覽器中的navigator對象也都有一套本身的屬性。下表列出了存在於全部瀏覽器中的屬性和方法，以及支持它們的瀏覽器版本html

屬性                    說明

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不支持]

 

檢測插件

　　檢測瀏覽器插件是一種最多見的檢測例程java

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

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

　　經過循環迭代每一個插件並將插件的name與給定的名字進行比較web

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

　　對於IE瀏覽器，檢測插件的辦法是使用專有的ActiveXObject類型，並嘗試建立一個特定插件的實例。IE是使用COM對象來實現插件的，而COM對象使用惟一標識符來標識。所以，想檢查特定的插件就必須知道其COM標識符。例如，Flash的標識符是ShockwaveFlash.ShockwaveFlashchrome

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

【兼容寫法】windows

//檢測非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實現用戶代理檢測。用戶代理檢測是一種萬不得已的作法，優先級排在前面介紹過的能力檢測以後數組

發展歷史瀏覽器

　　一、1993年美國NCSA國家超級計算機中心發佈了世界上第一款web瀏覽器Mosaic，該瀏覽器的用戶代理字符串爲Mosaic/0.9服務器

　　二、Netscape公司進入瀏覽器開發領域，將本身產品的代號定名了Mozilla(Mosaic Killer)的簡寫，用戶代理字符串格式爲Mozilla/版本號 [語言] (平臺；加密類型)

　　三、IE贏得用戶普遍承認的web瀏覽器IE3發佈時，Netscape已經佔據了絕對市場份額，爲了讓服務器可以檢測到IE，IE將用戶代理字符串修改爲兼容Netscape的形式：Mozilla/2.0(compatible;MSIE版本號；操做系統)

　　四、各瀏覽器陸續出現，用戶代理字符串的顯示格式也愈來愈相似……

　　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.1
Windows Vista                     ->             6.0
Windows 7                         ->             6.1
Windows 8                         ->             6.2
Windows 8.1                       ->             6.3
Windows 10技術預覽版             　 ->             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

 

識別移動端

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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程