JS---浏覽器檢測

由于每個浏覽器都具有自己獨到的擴充，是以在開發階段來判斷浏覽器是一個非常重要的步驟。雖然浏覽器開發商在公共接口方面投入了很多精力，努力的去支援最常用的公共功能；但在現實中，浏覽器之間的差異，以及不同浏覽器的“怪癖”卻是非常多的，是以用戶端檢測除了是一種補救措施，更是一種行之有效的開發政策。

一．navigator對象

navigator對象最早由NetscapeNavigator2.0引入的navigator對象，現在已經成為識别用戶端浏覽器的事實标準。與之前的BOM對象一樣，每個浏覽器中的navigator對象也都有一套自己的屬性。

navigator對象的屬性或方法

屬性或方法

說明

Firefox

Safari/Chrome

Opera

appCodeName

浏覽器的名稱。通常是Mozilla，即使在非Mozilla浏覽器中也是如此

3.0+

1.0+

7.0+

appName

完整的浏覽器名稱

appMinorVersion

次版本資訊

4.0+

9.5+

appVersion

浏覽器的版本。一般不與實際的浏覽器版本對應

buildID

浏覽器編譯版本

2.0+

cookieEnabled

表示cookie是否啟用

cpuClass

用戶端計算機中使用的CPU類型(x86、68K、Alpha、PPC、other)

javaEnabled()

表示目前浏覽器中是否啟用了Java

language

浏覽器的主語言

mimeTypes

在浏覽器中注冊的MIME類型數組

onLine

表示浏覽器是否連接配接到了網際網路

opsProfile

似乎早就不用了。無法查詢

oscpu

用戶端計算機的作業系統或使用的CPU

platform

浏覽器所在的系統平台

plugins

浏覽器中安裝的插件資訊的數組

preference()

設定使用者的首選項

1.5+

product

産品名稱（如Gecko）

productSub

關于産品的次要資訊（如Gecko的版本）

registerContentHandler()

針對特定的MIME類型講一個站點注冊為處理程式

registerProtocolHandler()

針對特定的協定将一個站點注冊為處理程式

2.0

securityPolicy

已經廢棄。安全政策的名稱

systemLanguage

作業系統的語言

taintEnabled()

已經廢棄。表示是否運作變量被修改

userAgent

浏覽器的使用者代理字元串

userLanguage

作業系統的預設語言

userProfile

借以通路使用者個人資訊的對象

vendor

浏覽器的品牌

verdorSub

有關供應商的次要資訊

1.浏覽器及版本号

不同的浏覽器支援的功能、屬性和方法各有不同。比如IE和Firefox顯示的頁面可能就會有所略微不同。

alert('浏覽器名稱：' +navigator.appName);

alert('浏覽器版本：' +navigator.appVersion);

alert('浏覽器使用者代理字元串：' +navigator.userAgent);

alert('浏覽器所在的系統：' +navigator.platform);

2.浏覽器嗅探器

浏覽器嗅探器是一段程式，有了它，浏覽器檢測就變得簡單了。我們這裡提供了一個browserdetect.js檔案，用于判斷浏覽器的名稱、版本号及作業系統。

調用方式

BrowserDetect.browser

浏覽器的名稱，例如Firefox，IE

BrowserDetect.version

浏覽器的版本，比如，7、11

BrowserDetect.OS

浏覽器所宿主的作業系統，比如Windows、Linux

alert(BrowserDetect.browser); //名稱

alert(BrowserDetect.version); //版本

alert(BrowserDetect.OS) //系統

3.檢測插件

插件是一類特殊的程式。他可以擴充浏覽器的功能，通過下載下傳安裝完成。比如，線上音樂、視訊動畫等等插件。

navigator對象的plugins屬性，這個一個數組。存儲在浏覽器已安裝插件的完整清單。

屬性

含義

name

插件名

filename

插件的磁盤檔案名

length

plugins數組的元素個數

description

插件的描述資訊

//列出所有的插件名

for (var i = 0; i <navigator.plugins.length; i ++) {

document.write(navigator.plugins[i].name+ '<br />');

}

//檢測非IE浏覽器插件是否存在

function hasPlugin(name) {

varname = name.toLowerCase();

for(var i = 0; i < navigator.plugins.length; i ++) {

if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {

returntrue;

}

returnfalse;

alert(hasPlugin('Flash')); //檢測Flash是否存在

alert(hasPlugin('java')) //檢測Java是否存在

4.ActiveX

IE浏覽器沒有插件，但提供了ActiveX控件。ActiveX控件一種在Web頁面中嵌入對象或元件的方法。

由于在JS中，我們無法把所有已安裝的ActiveX控件周遊出來，但我們還是可以去驗證是否安裝了此控件。

//檢測IE中的控件

function hasIEPlugin(name) {

try{

new ActiveXObject(name);

return true;

}catch (e) {

return false;

//檢測Flash

alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));

PS：ShockwaveFlash.ShockwaveFlash是IE中代表FLASH的辨別符，你需要檢查哪種控件，必須先擷取它的辨別符。

//跨浏覽器檢測是否支援Flash

function hasFlash() {

varresult = hasPlugin('Flash');

if(!result) {

result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash');

returnresult;

alert(hasFlash());

5.MIME類型

MIME是指多用途網際網路郵件擴充。它是通過網際網路發送郵件消息的标準格式。現在也被用于在網際網路中交換各種類型的檔案。

PS：mimeType[]數組在IE中不産生輸出。

mimeType對象的屬性

type

MIME類型名

MIME類型的描述資訊

enabledPlugin

指定MIME類型配置好的plugin對象引用

suffixes

MIME類型所有可能的檔案擴充名

//周遊非IE下所有MIME類型資訊

for (var i = 0; i <navigator.mimeTypes.length; i++) {

if(navigator.mimeTypes[i].enabledPlugin != null) {

document.write('<dl>');

document.write('<dd>類型名稱：'+ navigator.mimeTypes[i].type + '</dd>');

document.write('<dd>類型引用：'+ navigator.mimeTypes[i].enabledPlugin.name + '</dd>');

document.write('<dd>類型描述：'+ navigator.mimeTypes[i].description + '</dd>');

document.write('<dd>類型字尾：'+ navigator.mimeTypes[i].suffixes + '</dd>');

document.write('</dl>')

二．用戶端檢測

用戶端檢測一共分為三種，分别為：能力檢測、怪癖檢測和使用者代理檢測，通過這三種檢測方案，我們可以充分的了解目前浏覽器所處系統、所支援的文法、所具有的特殊性能。

1.能力檢測

能力檢測又稱作為特性檢測，檢測的目标不是識别特定的浏覽器，而是識别浏覽器的能力。能力檢測不必估計特定的浏覽器，隻需要确定目前的浏覽器是否支援特定的能力，就可以給出可行的解決方案。

//BOM章節的一段程式

var width = window.innerWidth; //如果是非IE浏覽器

if (typeof width != 'number') { //如果是IE，就使用document

if(document.compatMode == 'CSS1Compat') {

width =document.documentElement.clientWidth;

}else {

width = document.body.clientWidth; //非标準模式使用body

PS：上面其實有兩塊地方使用了能力檢測，第一個就是是否支援innerWidth的檢測，第二個就是是否是标準模式的檢測，這兩個都是能力檢測。

2.怪癖檢測(bug檢測)

與能力檢測類似，怪癖檢測的目标是識别浏覽器的特殊行為。但與能力檢測确認浏覽器支援什麼能力不同，怪癖檢測是想要知道浏覽器存在什麼缺陷(bug)。

bug一般屬于個别浏覽器獨有，在大多數新版本的浏覽器被修複。在後續的開發過程中，如果遇到浏覽器bug我們再詳細探讨。

var box = {

toString: function () {} //建立一個toString()，和原型中重名了

};

for (var o in box) {

alert(o); //IE浏覽器的一個bug，不識别了

3.使用者代理檢測

使用者代理檢測通過檢測使用者代理字元串來确定實際使用的浏覽器。在每一次HTTP請求過程中，使用者代理字元串是作為響應首部發送的，而且該字元串可以通過JavaScript的navigator.userAgent屬性通路。

使用者代理代理檢測，主要通過navigator.userAgent來擷取使用者代理字元串的，通過這組字元串，我們來擷取目前浏覽器的版本号、浏覽器名稱、系統名稱。

PS：在伺服器端，通過檢測使用者代理字元串确定使用者使用的浏覽器是一種比較廣為接受的做法。但在用戶端，這種測試被當作是一種萬不得已的做法，且飽受争議，其優先級排在能力檢測或怪癖檢測之後。飽受争議的原因，是因為它具有一定的欺騙性。

document.write(navigator.userAgent); //得到使用者代理字元串

Firefox14.0.1

Mozilla/5.0 (Windows NT 5.1; rv:14.0)Gecko/20100101 Firefox/14.0.1

Firefox3.6.28

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN;rv:1.9.2.28) Gecko/20120306 Firefox/3.6.28

Chrome20.0.1132.57 m

Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11(KHTML, like Gecko) Chrome/20.0.1132.57 Safari/536.11

Safari5.1.7

Mozilla/5.0 (Windows NT 5.1)AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

IE7.0

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR3.5.30729)

IE8.0

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR3.0.4506.2152; .NET CLR 3.5.30729)

IE6.0

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT5.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR3.5.30729)

Opera12.0

Opera/9.80 (Windows NT 5.1; U; zh-cn)Presto/2.10.289 Version/12.00

Opera7.54

Opera/7.54 (Windows NT 5.1; U) [en]

Opera8

Opera/8.0 (Window NT 5.1; U; en)

Konqueror (Linux內建，基于KHTML呈現引擎的浏覽器)

Mozilla/5.0 (compatible; Konqueror/3.5; SunOS)KHTML/3.5.0 (like Gecko)

隻要仔細的閱讀這些字元串，我們可以發現，這些字元串包含了浏覽器的名稱、版本和所宿主的作業系統。

每個浏覽器有它自己的呈現引擎：所謂呈現引擎，就是用來排版網頁和解釋浏覽器的引擎。通過代理字元串發現，我們歸納出浏覽器對應的引擎：

IE -- Trident， IE8展現出來了，之前的未展現

Firefox -- Gecko，

Opera -- Presto，舊版本根本無法展現呈現引擎

Chrome -- WebKit WebKit是KHTML呈現引擎的一個分支，後獨立開來

Safari -- WebKit

Konqueror -- KHTML

由上面的情況，我們需要檢測呈現引擎可以分為五大類：IE、Gecko、WebKit、KHTML和Opera。

var client = function () { //建立一個對象

varengine = { //呈現引擎

ie : false,

gecko : false,

webkit : false,

khtml : false,

opera : false,

ver : 0 //具體的版本号

};

return{

engine : engine //傳回呈現引擎對象

}(); //自我執行

alert(client.engine.ie); //擷取ie

以上的代碼實作了五大引擎的初始化工作，分别給予true的初值，并且設定版本号為0。

下面我們首先要做的是判斷Opera，因為Opera浏覽器支援window.opera對象，通過這個對象，我們可以很容易擷取到Opera的資訊。

for (var p in window.opera) { //擷取window.opera對象資訊

document.write(p+ "<br />");

if (window.opera) { //判斷opera浏覽器

engine.ver= window.opera.version(); //擷取opera呈現引擎版本

engine.opera= true; //設定真

接下來，我們通過正規表達式來擷取WebKit引擎和它的版本号。

else if (/AppleWebKit\/(\S+)/.test(ua)) { //正則WebKit

engine.ver= RegExp['$1']; //擷取WebKit版本号

engine.webkit= true;

然後，我們通過正規表達式來擷取KHTML引擎和它的版本号。由于這款浏覽器基于Linux，我們無法測試。

//擷取KHTML和它的版本号

else if (/KHTML\/(\S+)/.test(ua) ||/Konqueror\/([^;]+)/.test(ua)) {

engine.ver = RegExp['$1'];

engine.khtml = true;

下面，我們通過正規表達式來擷取Gecko引擎和它的版本号。

else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){ //擷取Gecko和它的版本号

engine.ver= RegExp['$1'];

engine.gecko= true;

最後，我們通過正規表達式來擷取IE的引擎和它的版本号。因為IE8之前沒有呈現引擎，是以，我們隻有通過"MSIE"這個共有的字元串來擷取。

else if (/MSIE ([^;]+)/.test(ua)) { //擷取IE和它的版本号

engine.ie= true;

上面擷取各個浏覽器的引擎和引擎的版本号，但大家也發現了，其實有些确實是浏覽器的版本号。是以，下面，我們需要進行浏覽器名稱的擷取和浏覽器版本号的擷取。

根據目前的浏覽器市場佔有率，我們可以給一下浏覽器做檢測：IE、Firefox、konq、opera、chrome、safari。

var browser = { //浏覽器對象

ie: false,

firefox: false,

konq: false,

opera: false,

chrome: false,

safari: false,

ver: 0, //具體版本

name: '' //具體的浏覽器名稱

對于擷取IE浏覽器的名稱和版本，可以直接如下：

else if (/MSIE ([^;]+)/.test(ua)) {

engine.ver = browser.ver = RegExp['$1']; //設定版本

engine.ie = browser.ie = true; //填充保證為true

browser.name = 'Internet Explorer'; //設定名稱

對于擷取Firefox浏覽器的名稱和版本，可以如下：

else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){

engine.gecko = true;

if (/Firefox\/(\S+)/.test(ua)) {

browser.ver= RegExp['$1']; //設定版本

browser.firefox= true; //填充保證為true

browser.name= 'Firefox'; //設定名稱

對于擷取Chrome和safari浏覽器的名稱和版本，可以如下：

else if (/AppleWebKit\/(\S+)/.test(ua)) {

engine.webkit = parseFloat(engine.ver);

if (/Chrome\/(\S+)/.test(ua)) {

browser.ver= RegExp['$1'];

browser.chrome= true;

browser.name= 'Chrome';

} else if (/Version\/(\S+)/.test(ua)) {

browser.name= 'Safari';

PS：對于Safari3之前的低版本，需要做WebKit的版本号近似映射。而這裡，我們将不去深究，已提供代碼。

浏覽器的名稱和版本号，我們已經準确的擷取到，最後，我們想要去擷取浏覽器所宿主的作業系統。

var system = { //作業系統

win: false, //windows

mac: false, //Mac

x11: false //Unix、Linux

var p = navigator.platform; //擷取系統

system.win = p.indexOf('Win') == 0; //判斷是否是windows

system.mac = p.indexOf('Mac') == 0; //判斷是否是mac

system.x11 = (p == 'X11') ||(p.indexOf('Linux') == 0) //判斷是否是Unix、Linux

PS：這裡我們也可以通過使用者代理字元串擷取到windows相關的版本，這裡我們就不去深究了，提供代碼和對應清單。

Windows版本

IE4+

Gecko

Opera < 7

Opera 7+

WebKit

"Windows 95"

"Win95"

n/a

"Windows 98"

"Win98"

NT4.0

"Windows NT"

"WinNT4.0"

"Windows NT 4.0"

2000

"Windows NT 5.0"

"Windows NT5.0"

"Windows 2000"

"Win 9X 4.90"

"Win 9x 4.90"

"Windows ME"

"Windows NT 5.1"

"Windows XP"

Vista

"Windows NT 6.0"

"Windows NT 6.1"

本文轉自風雨蕭條部落格，原文連結： http://blog.51cto.com/1095221645/1878241 如需轉載請自行聯系原作者

JS---浏覽器檢測

繼續閱讀

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

samba伺服器的功能

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

【Linux】UDP廣播封包接收速率問題

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

layui多任務上傳添加進度條

win10本地scala和spark安裝安裝scala安裝spark

Linux裝置模型（中）之上層容器

scala (3) Function 和 Method

PowerPC平台 Linux移植三