2. 程式人生 > >BOM之navigator對象和用戶代理檢測

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

阿新 • • 發佈：2017-06-07
詳細介紹 mobile 瀏覽器開發 gif 5.0 預覽版 afa target www

前面的話

　　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;
        }
    }
}
//檢測flash
console.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;
    }
}
//檢測Flash
console.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.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
技術分享

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

相關推薦

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

詳細介紹 mobile 瀏覽器開發 gif 5.0 預覽版 afa target www 前面的話 　　navigator對象現在已經成為識別客戶端瀏覽器的事實標準，navigator對象是所有支持javascript的瀏覽器所共有的。本文將詳細介紹navigator對象和

【ASP】response和sever對象實現用戶登錄

輸入 asp 服務器 right prot inf request res event 1.問題提出 　　設計兩個登錄界面：一個register.asp頁面用於輸入賬號，密碼等信息進行登錄。另一個頁面welcome.asp用於顯示登錄成功的信息。利用request的兩個對

SharePoint 2013 JavaScript 對象推斷用戶權限

epo data- miss () 對象 context demo div syn ?場 景　　最近有個場景，推斷當前用戶對項目有沒有編輯權限，使用JavaScript完畢。弄了好久才弄出來。分享一下，有須要的自行擴展吧，詳細例如以下；代 碼function getPer

BOM之location對象

asc ide scrip com title lap set cat 當前 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-

Js之Navigator對象

int 檢測 strong blog 操作 有時 表示 mpat tle Window對象的navigator屬性引用的是包含瀏覽器廠商和版本信息的Navigator對象。Navigator對象的命名是為了紀念Netscape之後NavigatorBU覽器譯註2，不過

9.13 視圖層之請求對象和響應對象

Coding enc 下使用 pla 用戶認證 一個表 文件信息 request python 字典 解耦： 從瀏覽器訪問都是get請求，post請求可以是從form表單method=post 二、請求對象： 匹配到根路徑：

2017-12-15python全棧9期第二天第四節之格式化輸出%s和用戶交互個人簡歷模板

use obb info 用戶 %d pytho utf 交互 int #!/user/bin/python# -*- coding:utf-8 -*-name = input(‘姓名：‘)age = input(‘年齡：‘)job = input(‘工作：‘)hobbie

SS中的三種樣式來源：創作人員、讀者和用戶代理

最終 插件 evel 想要 開發者 有一個 agen 接口 html CSS中的樣式一共有三種來源：創作人員、讀者和用戶代理，來源的不同會影響到樣式的層疊方式，很多第一次學習CSS的朋友，對這三種來源可能會存在一些困惑，下面我寫一下自己的理解，若有錯誤的地方還請指正。首先，

【API】獲取當前進程的用戶對象和GDI對象

gdi size term npr text hand gui img lose GR_GDIOBJECTS 0 Return the count of GDI objects. // GR_USEROBJECTS 1 Return the count of US

四瀆《構建之法》——計劃估計、敏捷流程、項目經理和用戶場景

理解 流程 ger 改進 學習 解決 可能 觀察 平衡 本周再次打開《構建之法》，這次我閱讀時重點在於學習敏捷流程、項目經理和用戶場景等相對較為宏觀的內容。 第六章開篇即簡單地介紹了敏捷開發的流程：Product Backlog—>Sprint Backlog—>

YII用戶註冊和用戶登錄（三）之模型中規則制定和分析

模型 als del 郵箱 收信 com unique mark div 3 模型中規則制定和分析 YII模型主要分為兩類，一個數據模型，處理和數據庫相關的增刪改查。繼承CActiveRecord。還有一個是表單模型，繼承CFormModel。不與數據庫進行交互。操作

Python學習之三【對象和類型&amp;&amp;運算符】

str pop python學習 十六進制 更強 ring span 整數相除 一定的 [對象和類型] 學生的屬性: 小明 對象 姓名：男 性別： 年齡： 身高： 體重： 籍貫： 五種基本對象類型 字符串 （string），簡

python基礎之面向對象編程介紹、類和對象

屬於 func 每次 基礎 lang 屬性字典 位置 需求 內部 面向對象變成介紹 面向過程編程 核心是過程（流水線式思維），過程即解決問題的步驟，面向過程的設計就好比精心設計好一條流水線，考慮周全什麽時候處理什麽東西。主要應用在一旦完成很少修改的地方，如linux內核、g

python之面向對象（接口和抽象類）

抽取 高層 per 常常 typeerror app 具體細節 同仁 接口 一、接口 什麽是接口 繼承有兩種用途： 1：繼承基類的方法，並且做出自己的改變或者擴展（代碼重用）。 2：聲明某個子類兼容於某基類，定義一個接口類Interface，接口類中定義了一些接口名（就是函

JavaWeb（三）JSP之3個指令、6個動作、9個內置對象和4大作用域

不用 context 請求 判斷 自定義 except -c 一次 導航欄 前言 　　前面大概介紹了什麽是JSP，今天我給大家介紹一下JSP的三個指令、6個動作以及它的9大內置對象。接下來我們就直接進入正題 一、JSP的3個指令 JSP指令（directive）是為J

Nginx 之 基於ip和用戶的控制

控制 ip 用戶1 概述本文將介紹基於ip和用戶實現對網頁的訪問權限控制。通過ngx_http_access_module模塊實現基於ip的控制，ngx_http_auth_basic_module模塊實現基於用戶的控制2 ngx_http_access_module模塊實現基於ip的訪問控制功能.1

Linux系列教程（十五）——Linux用戶和用戶組管理之用戶管理命令

總結 usr 而且 ron 初始 切換 密碼規則 一個 郵箱目錄 　　上篇博客我們介紹了用戶管理的相關配置文件，包括用戶信息文件/etc/passwd，用戶密碼文件/etc/shadow；然後介紹了用戶組信息文件/etc/group，用戶組密碼文件/etc/gshadow。

烏班圖 之 組管理 和 用戶管理

/etc/ 兩種 pan shel alt user 信息 src bash 一、組管理 添加和刪除組以及更改所屬組都是需要sudo 來使用root身份執行 groupadd 組名　　添加組 groupdel 組名　　刪除組 cat /etc/group　　確認組信息 c

Linux基礎知識之用戶和用戶組以及 Linux 權限管理

space 屬性 並且 用戶表 相同 發行版 切換 用戶登錄 是什麽 已經開始接觸Linux用戶管理，用戶組管理，以及權限管理這幾個逼格滿滿的關鍵字。這幾個關鍵字對於前端程序猿的我來說真的是很高大上有木有，以前嘗試學 Linux 的時候看到這些名詞總是下意識的跳過不敢看有木

scala成長之路（2）對象和類

ascii int 紅色 部分 類名 基類 req 字面量 標識符 scala提供了一種特殊的定義單例的方法：object關鍵字 scala> object Shabi{ | val age = 0 | val name = "shabi"