歡迎光臨
每天分享高質量文章

javascript客戶端檢測技術(下)


識別平臺

目前有三大主流平臺(windows,Mac,Unix(包括各種linux));因為那些瀏覽器(safari,opera,firefox)在不同的平臺可能會有不同的問題;為了檢測這些平臺,還需要像下麵這樣再添加一個新物件;

var client = function(){

var engine = {

// 呈現引擎

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,

mac: false,

xll: false

};

// 在此檢測呈現引擎,平臺和設備

return {

engine: engine,

browser: browser,

system: system

};

}();

如上的代碼添加了一個包含3個屬性的新變數system,其中,win屬性表示是否為windows平臺,mac代表Mac,xll代表是Unix,system的物件的屬性預設都為false,在確定平臺時,檢測navigator.platform要比檢測用戶代理字串更簡單,檢測用戶代理字串在不同的瀏覽器中會給出不同的平臺信息,而navigator.platform屬性可能的值包括”Win32”,”Win64”,”MacPPC”,”MacIntel”,”Xll”和”Linux i686”,這些值在不同的瀏覽器中都是一致的,檢測代碼非常直觀;如下代碼:

var system = client;

var platform = navigator.platform;

system.win = platform.indexOf(“Win”) == 0;

system.mac = platform.indexOf(“Mac”) == 0;

system.x11 = (platform.indexOf(“X11”) == 0) || (platform.indexOf(“Linux”) == 0);

比如我現在在chrome瀏覽器下打印如下:

console.log(system)

截圖如下:

如果我想知道是win32或者是win64的話,我們可以使用這句代碼打印即可

Console.log(navigator.platform);

識別移動設備

可以通過簡單地檢測字串”iPhone”,”iPod”,”iPad”,就可以分別設置響應屬性的值了。

system.iphone = ua.indexOf(“iphone”) > -1;

system.ipod = ua.indexOf(“ipod”) > -1;

system.ipad = ua.indexOf(“ipad”) > -1;

除了知道iOS 設備,最好還能知道iOS 的版本號。在iOS 3 之前,用戶代理字串中只包含”CPU like

Mac OS”,後來iPhone 中又改成”CPU iPhone OS 3_0 like Mac OS X”,iPad 中又改成”CPU OS 3_2

like Mac OS X”。也就是說,檢測iOS 需要正則運算式反映這些變化。

//檢測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;

//不能真正檢測出來,所以只能猜測

}

}

檢查系統是不是Mac OS、字串中是否存在”Mobile”,可以保證無論是什麼版本,system.ios

中都不會是0。然後,再使用正則運算式確定是否存在iOS 的版本號。如果有,將system.ios 設置為

表示版本號的浮點值;否則,將版本設置為2。(因為沒有辦法確定到底是什麼版本,所以設置為更早的

版本比較穩妥。)

檢測Android 操作系統也很簡單,也就是搜索字串”Android”並取得緊隨其後的版本號。

//檢測Android 版本

if (/android (\d+\.\d+)/.test(ua)){

system.android = parseFloat(RegExp.$1);

}

由於所有版本的Android 都有版本值,因此這個正則運算式可以精確地檢測所有版本,並將

system.android 設置為正確的值。

在瞭解這些設備信息的基礎上,就可以通過下列代碼來確定用戶使用的是什麼設備中的WebKit 來

訪問網頁:

if (client.engine.webkit){

if (client.system.ios){

//iOS 手機的內容

} else if (client.system.android){

//Android 手機的內容

}

}

因此所有的JS代碼如下:

var client = function(){

var engine = {

// 呈現引擎

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,

mac: false,

xll: false,

// 移動設備

iphone: false,

ipod: false,

ipad: false,

ios: false,

android:false

};

// 在此檢測呈現引擎,平臺和設備

return {

engine: engine,

browser: browser,

system: system

};

}();

var engine = client;

var browser = client;

var ua = navigator.userAgent.toLowerCase();

if(ua.match(/opr\/([\d\.]+)/) || window.opera) {

var result = ua.match(/opr\/([\d\.]+)/);

engine.ver = browser.ver = result[1];

engine.opera = browser.opera = parseFloat(engine.ver);

if(window.opera) {

engine.ver = browser.ver = window.opera.version();

engine.opera = browser.opera = parseFloat(engine.ver);

}

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

engine.ver = RegExp[“$1”];

engine.webkit = parseFloat(engine.ver);

// 確定是chrome還是safari

/*

* chrome用戶代理字串

* Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

* Chrome/42.0.2311.152 Safari/537.36

*/

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

browser.ver = RegExp[“$1”];

browser.chrome = parseFloat(browser.ver);

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

/*

* safari用戶代理字串

* Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko)

* Version/5.1.7 Safari/534.57.2

*/

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(ua) || /konqueror\/([^;]+)/.test(ua)){

engine.ver = browser.ver = RegExp[“$1”];

engine.khtml = browser.konq = parseFloat(engine.ver);

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

engine.ver = RegExp[“$1”];

engine.gecko = parseFloat(engine.ver);

/*

* firefox的用戶代理的字串

* Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0)

* Gecko/20100101 Firefox/38.0

*/

// 確定是不是firefox

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

browser.ver = RegExp[“$1”];

browser.firefox = parseFloat(browser.ver);

}

}else if (/msie ([^;]+)/.test(ua) || “ActiveXObject” in window){

if(“ActiveXObject” in window) {

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

engine.ver = browser.ver = RegExp[“$1”];

engine.ie = browser.ie = parseFloat(engine.ver);

}else {

if(/rv:([^\)]+)\)/.test(ua)) {

engine.ver = browser.ver = RegExp[“$1”];

engine.ie = browser.ie = parseFloat(engine.ver);

}

}

}

}

// 檢測平臺

var system = client;

var platform = navigator.platform;

system.win = platform.indexOf(“Win”) == 0;

system.mac = platform.indexOf(“Mac”) == 0;

system.x11 = (platform.indexOf(“X11”) == 0) || (platform.indexOf(“Linux”) == 0);

// 移動設備

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);

}

來自:塗根華的博客

鏈接:http://www.cnblogs.com/tugenhua0707/p/4540766.html



赞(0)

分享創造快樂