用戶代理檢測通過檢測用戶代理字符串來確定實際使用的瀏覽器。在每一次HTTP請求過程中肋层,用戶代理字符串是作為相應(yīng)首部發(fā)送的亿笤,而且該字符串可以通過JavaScript的navigator.userAgent屬性訪問。在服務(wù)器端栋猖,通過檢測用戶代理字符串來確定用戶使用的瀏覽器是一種常用而且廣為接受的做法净薛。在客戶端,優(yōu)先級在能力檢測和怪癖檢測之后蒲拉。
1.識別呈現(xiàn)引擎
檢測五大呈現(xiàn)引擎:IE肃拜、Gecko、WebKit雌团、KHTML和Opera燃领。
為了不再全局作用域中添加多余的變量,使用模塊增強模式來封裝檢測腳本锦援。
var client = function () {
var engine = {
//呈現(xiàn)引擎
ie:0,
gecko:0,
webkit:0,
khtml:0,
opera:0,
//具體版本號
ver:null
};
//在此檢測呈現(xiàn)引擎猛蔽、平臺和設(shè)備
return {
engine:engine
};
}();
要正確的識別呈現(xiàn)引擎,關(guān)鍵是檢測順序要正確灵寺。第一步是識別Opera曼库,要識別Opera,必須得檢測window.opera替久,調(diào)用version()方法可以返回一個表示瀏覽器版本的字符串凉泄。
if (window.opera) {
engine.ver = window.opera.version();
engine.opera = parseFloat(engine.ver);
}
放在第二位檢測的呈現(xiàn)引擎是Webkit,WebKit用戶代理字符串中的“AppleWebKit”是獨一無二的蚯根,因此檢測這個字符串最合適后众。
var ua=navigator.userAgent;
if(window.opera){
engine.ver = window.opera.version();
engine.opera = parseFloat(engine.ver);
}else if(/AppleWebKit\/(\S+)/.test(us)){
engine.ver = RegExp["$1"];
engine.webkit=parseFloat(engine.ver);
}
接下來測試呈現(xiàn)引擎KHTML胀糜。
var ua=navigator.userAgent;
if(window.opera){
engine.ver = window.opera.version();
engine.opera = parseFloat(engine.ver);
}else if(/AppleWebKit\/(\S+)/.test(us)){
engine.ver = RegExp["$1"];
engine.webkit=parseFloat(engine.ver);
}else if (/KHTML\/(/S+).test(us)||/Konqueror\/([^;]+)/.test(us)) {
engine.ver = RegExp["$1"];
engine.khtml=parseFloat(engine.ver);
}
檢測Gecko。
var ua=navigator.userAgent;
if(window.opera){
engine.ver = window.opera.version();
engine.opera = parseFloat(engine.ver);
}else if(/AppleWebKit\/(\S+)/.test(us)){
engine.ver = RegExp["$1"];
engine.webkit=parseFloat(engine.ver);
}else if (/KHTML\/(/S+).test(us)||/Konqueror\/([^;]+)/.test(us)) {
engine.ver = RegExp["$1"];
engine.khtml=parseFloat(engine.ver);
}else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(us)){
engine.ver = RegExp["$1"];
engine.gecko=parseFloat(engine.ver);
}
最后檢測呈現(xiàn)引擎IE蒂誉。
var ua=navigator.userAgent;
if(window.opera){
engine.ver = window.opera.version();
engine.opera = parseFloat(engine.ver);
}else if(/AppleWebKit\/(\S+)/.test(us)){
engine.ver = RegExp["$1"];
engine.webkit=parseFloat(engine.ver);
}else if (/KHTML\/(/S+).test(us)||/Konqueror\/([^;]+)/.test(us)) {
engine.ver = RegExp["$1"];
engine.khtml=parseFloat(engine.ver);
}else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(us)){
engine.ver = RegExp["$1"];
engine.gecko=parseFloat(engine.ver);
}else if(/MSIE ([^;]+)/.test(us)){
engine.ver = RegExp["$1"];
engine.ie=parseFloat(engine.ver);
}
2.識別瀏覽器
var client = function () {
var engine = {
//呈現(xiàn)引擎
ie:0,
gecko:0,
webkit:0,
khtml:0,
opera:0,
//具體版本號
ver:null
};
var browser = {
//瀏覽器
ie:0,
firefox:0,
safari:0,
konq:0,
opera:0,
chrome:0,
//具體版本
ver:null
};
//在此檢測呈現(xiàn)引擎教藻、平臺和設(shè)備
return {
engine:engine,
browser: browser
};
}();
//檢測呈現(xiàn)引擎及瀏覽器
var ua=navigator.userAgent;
if(window.opera){
engine.ver = browser.ver = window.opera.version();
engine.opera = browser.opera = parseFloat(engine.ver);
}else if(/AppleWebKit\/(\S+)/.test(us)){
engine.ver = RegExp["$1"];
engine.webkit=parseFloat(engine.ver);
//確定是Chrome還是Safari
if (/Chrome\/(\S+)/.test(us)) {
browser.ver = RegExp["$1"];
browser.chrome = parseFloat(browser.ver);
}else if(/Version\/(\S+)/.test(us)){
browser.ver = RegExp["$1"];
browser.safari = parseFloat(browser.ver);
}else{
//近似確定版本號
var safariVersion= 1;
if(engine.webkit<100){
safariVersion = 1;
}else if(engine.webkit<312){
safariVersion = 1.2;
}else if(engine.webkit<412){
safariVersion=1.3;
}else{
safariVersion=2
}
browser.safari = browser.ver = safariVersion;
}
}else if (/KHTML\/(/S+).test(us)||/Konqueror\/([^;]+)/.test(us)) {
engine.ver = browser.ver = RegExp["$1"];
engine.khtml= browser.konq=parseFloat(engine.ver);
}else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(us)){
engine.ver = RegExp["$1"];
engine.gecko=parseFloat(engine.ver);
//確定是不是Firefox
if(/Firefox\/(/S+).test(us)){
browser.ver = RegExp["$1"];
browser.firefox = parseFloat(browser.ver);
}
}else if(/MSIE ([^;]+)/.test(us)){
engine.ver = RegExp["$1"];
engine.ie=parseFloat(engine.ver);
}
if (client.engine.webkit) {
if(client.browser.chrome){
}else if(client.browser.safari){
}
}else if(client.engine.gecko){
if(client.browser.firefox){
}else{
}
}
3.識別平臺
目前三大主流平臺Windows右锨、Mac和Unix(包括各自Linux)括堤。
var client = function () {
var engine = {
//呈現(xiàn)引擎
ie:0,
gecko:0,
webkit:0,
khtml:0,
opera:0,
//具體版本號
ver:null
};
var browser = {
//瀏覽器
ie:0,
firefox:0,
safari:0,
konq:0,
opera:0,
chrome:0,
//具體版本
ver:null
};
var system = {
win:false,
max:false,
xll:false
};
//在此檢測呈現(xiàn)引擎、平臺和設(shè)備
return {
engine:engine,
browser: browser,
system: system
};
}();
在確定平臺時绍移,檢測navigator.platform要比檢測用戶代理字符串更簡單悄窃。
var p = navigator.platform;
system.win = p.indeOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.xll - (p.indexOf("Xll") == 0) || (p.indeOf("Linux") == 0);
4.識別windows操作系統(tǒng)
if(system.win){
if(/Win(?:dows)?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
if(RegExp["$1"]=="NT"){
switch(RegExp["$2"]){
case "5.0":
system.win = "2000";
break;
case "5.1":
system.wub = "XP";
break;
case "6.0":
system.wub = "Vista";
break;
case "6.1":
system.wub = "7";
break;
default :
system.wub = "NT";
break;
}
}else if(RegExp["$1"] == "9x"){
system.win = "ME";
}else{
system.win = RegExp["$1"];
}
}
}
if (client.system.win) {
if(client.system.win == "XP"){
}else if(client.system.win == "Vista"){
}
}
5.識別移動設(shè)備
var client = function () {
var engine = {
//呈現(xiàn)引擎
ie:0,
gecko:0,
webkit:0,
khtml:0,
opera:0,
//具體版本號
ver:null
};
var browser = {
//瀏覽器
ie:0,
firefox:0,
safari:0,
konq:0,
opera:0,
chrome:0,
//具體版本
ver:null
};
var system = {
win:false,
max:false,
xll:false,
//移動設(shè)備
iphone:false,
ipod:false,
ipad:false,
ios:false,
android:false,
nokiaN:false,
winMobile:false
};
//移動設(shè)備
//在此檢測呈現(xiàn)引擎、平臺和設(shè)備
return {
engine:engine,
browser: browser,
system: system
};
}();
system.iphone = ua.indexOf("iPhone") > -1;
system.ipod = ua.indexOf("iPod") > -1;
system.ipad = ua.indexOf("iPad") > -1;
//檢測iOS版本
if(system.mac && ua.indexOf("Mobile")>-1){
if(/CPU(?:iPhone)>OS(\d+_\d+)/.test(ua)){
system.ios = parseFloat(RegExp.$1.replace("_","."));
}else{
system.ios = 2;//不能真正檢測出來蹂窖,只能猜測
}
}
//檢測Android版本
if(/Android (\d+\.\d+)/.test(ua)){
system.android = parseFloat(RegExp.$1);
}
//檢測Nokia
system.nokiaN= ua.indexOf("NokiaN")>-1;
6.識別游戲系統(tǒng)
var client = function () {
var engine = {
//呈現(xiàn)引擎
ie:0,
gecko:0,
webkit:0,
khtml:0,
opera:0,
//具體版本號
ver:null
};
var browser = {
//瀏覽器
ie:0,
firefox:0,
safari:0,
konq:0,
opera:0,
chrome:0,
//具體版本
ver:null
};
var system = {
win:false,
max:false,
xll:false,
//移動設(shè)備
iphone:false,
ipod:false,
ipad:false,
ios:false,
android:false,
nokiaN:false,
winMobile:false,
//游戲系統(tǒng)
wii:false,
ps:false
};
//在此檢測呈現(xiàn)引擎轧抗、平臺和設(shè)備
return {
engine:engine,
browser: browser,
system: system
};
}();