微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

javascript客户端检测技术(下)

2015-06-03 19:58 前端大全

(点击上方蓝字,可快速关注我们)


识别平台


目前有三大主流平台(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




1.『前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯,相关职位。欢迎关注。


微信号:FrontDev

(长按上图,弹出“识别二维码”后可快速关注)

http://web.jobbole.com/all-posts/

2. 点击“阅读原文”,查看更多前端文章。

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 如何「正确地」选择一家创业公司? CDH大数据平台搭建 6 个 ES6 代理使用案例 你真的懂韩国的用户体验么? 聊一聊百度移动端首页前端速度那些事儿