常用的客户端检测方式有以下三种:

1.能力检测

2.怪癖检测

3.用户代理检测

能力检测

最常用也是最为人们广泛接受的客户端检测形式是能力检测(又称特性检测)。能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何,只要确定浏览器支持特定的能力,就可以给出解决方案。能力检测的基本模式如下:

if(object.propertyInQuestion){
// 使用object.propertyInQuestion
}

要理解能力检测,首先必须理解两个重要的概念:

1.先检测达成目的的最常用的特性

2.必须测试实际要用到的特性,一个特性存在,不一定意味着另一个特性也存更可靠的能力检测

通过 typeof 确定是否为函数,进行能力检测。

 // 检查sort是不是函数
function isSortable(object){
return typeof object.sort == "function";
}

typeof 操作符用于确定 sort 的却是函数,因此可以调用他对数据进行排序。

在可能的情况下,尽量使用 typeof 进行能力检测。特别是宿主对象没有义务让 typeof 返回合理值。

能力检测,不是浏览器检测
检测某个或某几个特性并不能够确定浏览器。实际上,根据浏览器不同将能力组合起来是更可取的方式,最好是一次性检测所有相关特性,而不要分别检测。

/ 确定浏览器是否支持Netspace风格的插件
var hasNSPlugins = !!(navigator.plugins && navigator.pligins.length);
// 确定浏览器是否具有DOM1级别规定的能力
var hasDOM1 = !!(document.getElementById && document.createElement && document.getElementByTagName);

得到的布尔值可以在后继续使用,从而节省重新检测能力的时间。

怪癖检测

与能力检测类似,怪癖检测的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同,怪癖检测是想要知道浏览器存在什么缺陷("怪癖" 也就是 bug)。这通常需要运行一小段代码,以确定某一特性不能正常工作。

例如,IE8及更早版本中存在一个bug,即如果某个实例属性与[[Enumerable]]标记为 false 的某个原型属性同名,那么该实例属性将不会出现在 for-in 循环当中。

var hasDontEnumQuik = function(){
var o = {toString : function(){}};
for(var props in o){
if (props == "toString"){
return false ;
}
}
return true;
}();

一般来说,“怪癖”都是个别浏览器所独有的,而且通常被归为 bug。在相关浏览器的新版本中,这些问题可能会也可能不会被修复。由于检测 “怪癖” 设计运行代码,因此我们建议仅检测那些对你有直接影响的 “怪癖”,而且最好在脚本一开始就执行此类检测,以便尽早解决问题。

用户代理检测

用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次 HTTP 请求过程中,用户代理字符串是作为响应首部发送的,而且该字符串可以通过 JavaScript 的 navigator.userAgent 属性访问。在服务器端,通过检测用户代理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法。而在客户端,用户代理检测一般被当做一种万不得已才用的做法,其优先级排在能力检测和(或)怪癖检测之后。

以下是完整的用户代理字符串检测脚本,包括检测呈现引擎、平台、window操作系统、移动设备和游戏系统。

var client = function () {

    // rendering engines
var engine = {
ie: 0,
gecko: 0,
webkit: 0,
khtml: 0,
opera: 0, // complete version
ver: null
}; // browsers
var browser = { // browsers
ie: 0,
firefox: 0,
safari: 0,
konq: 0,
opera: 0,
chrome: 0, // specific version
ver: null
}; // platform/device/OS
var system = {
win: false,
mac: false,
x11: false, // mobile devices
iphone: false,
ipod: false,
ipad: false,
ios: false,
android: false,
nokiaN: false,
winMobile: false, // game systems
wii: false,
ps: false
};
// wx/qqZone/
var _client = {
wx: false,
qqZone: false
} // detect rendering engines/browsers
var ua = navigator.userAgent;
_client.wx = ua.match(/MicroMessenger/i) == "micromessenger";
_client.qqZone = ua.match(/QQ/i) == "qq";
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); // figure out if it's Chrome or Safari
if (/Chrome\/(\S+)/.test(ua)) {
browser.ver = RegExp["$1"];
browser.chrome = parseFloat(browser.ver);
} else if (/Version\/(\S+)/.test(ua)) {
browser.ver = RegExp["$1"];
browser.safari = parseFloat(browser.ver);
} else {
// approximate version
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); // determine if it's Firefox
if (/Firefox\/(\S+)/.test(ua)) {
browser.ver = RegExp["$1"];
browser.firefox = parseFloat(browser.ver);
}
} else if (/MSIE ([^;]+)/.test(ua)) {
engine.ver = browser.ver = RegExp["$1"];
engine.ie = browser.ie = parseFloat(engine.ver);
} // detect browsers
browser.ie = engine.ie;
browser.opera = engine.opera; // detect platform
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); // detect windows operating systems
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.win = "XP";
break;
case "6.0":
system.win = "Vista";
break;
case "6.1":
system.win = "7";
break;
default:
system.win = "NT";
break;
}
} else if (RegExp["$1"] == "9x") {
system.win = "ME";
} else {
system.win = RegExp["$1"];
}
}
} // mobile devices
system.iphone = ua.indexOf("iPhone") > -1;
system.ipod = ua.indexOf("iPod") > -1;
system.ipad = ua.indexOf("iPad") > -1;
system.nokiaN = ua.indexOf("NokiaN") > -1; // windows mobile
if (system.win == "CE") {
system.winMobile = system.win;
} else if (system.win == "Ph") {
if (/Windows Phone OS (\d+.\d+)/.test(ua)) {
;
system.win = "Phone";
system.winMobile = parseFloat(RegExp["$1"]);
}
} // determine iOS version
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; // can't really detect - so guess
}
} // determine Android version
if (/Android (\d+\.\d+)/.test(ua)) {
system.android = parseFloat(RegExp.$1);
} // gaming systems
system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua); // return it
return {
engine: engine,
browser: browser,
system: system,
_client: _client
}
}();

从头认识js-js客户端检测的更多相关文章

  1. js之客户端检测

    1 能力检测判断是否有某个属性或方法,例:在低版本中的opera浏览器中,window下有个opera属性 if (window.opera) { alert("opera"); ...

  2. JS之BOM、客户端检测和DOM

    这是第八章到第十二章的内容,粗略浏览过一遍. 一.BOM 浏览器对象模型.包括了window.location.navigator.screen和history对象. window:核心对象 1.JS ...

  3. H5案例分享:使用JS判断客户端、浏览器、操作系统类型

    使用JS判断客户端.浏览器.操作系统类型 一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Androi ...

  4. JS判断客户端、浏览器、操作系统

    一.JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 方法一: var u = navigator.us ...

  5. 使用JS判断客户端、浏览器、操作系统类型

    一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 核心代码如下: 方法一: &l ...

  6. JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)

    //平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...

  7. JS判断客户端是否是iOS或者Android或者ipad(三)

     *  * @function: 判断浏览器类型是否是Safari.Firefox.ie.chrome浏览器  * @return: true或false  *  */ function isSafa ...

  8. JS判断客户端是否是iOS或者Android或者ipad(二)

    js判断客户端是IPAD和iphone 多了就不说了,直接上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22     funct ...

  9. js 判断客户端 和 asp.net/C#判断客户端类型

    1.js 判断客户端 <script language="JavaScript"> <!-- onload = function browserRedirect( ...

  10. director.js:客户端的路由---简明中文教程

    1.引子 最近学用director.js,那是相当的简单易学易使用.不过开始学的时候,搜搜过后,却没有发现相关的中文教程.于是决定硬啃E文,翻译备用的同时也当是给自己上课并加深对它的理解. direc ...

随机推荐

  1. 编译原理_P1002

    . 词法分析 1.1 词法记号及属性 词法记号.模式.词法单元 记号名 词法单元列举    模式的非形式描述 if if 字符i,f for for     字符f,o,r relation < ...

  2. SQLServer 安装提示需要重启计算机的解决方案

    处理方法:在开始-程序-运行中(或者直接windows+R件同时),输入regedit回车,在注册表中找到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Con ...

  3. PictureService

    package me.zhengjie.tools.service; import me.zhengjie.tools.domain.Picture; import org.springframewo ...

  4. 在VMware装了linux系统,如何在windows系统中用xshell连接

    网上有好几种方法,不过我觉得这种比较简单 1.找到VMware菜单  打开 编辑>虚拟网络编辑器 如图: 点下面的更改设置 点确定就可以了,什么都不用改.然后回到linux系统中ifconfig ...

  5. 02-信贷路由项目rose框架拆分dubbo

    项目架构和 rose 框架搭建见  https://www.cnblogs.com/yuanpeng-java/p/9835984.html 1.dubbo 框架架构及组成 2.注册中心安装及配置 h ...

  6. LinkedList源码剖析

    LinkedList简介 LinkedList是基于双向循环链表(从源码中可以很容易看出)实现的,除了可以当做链表来操作外,它还可以当做栈.队列和双端队列来使用. LinkedList同样是非线程安全 ...

  7. ABC Fennec VS. Snuke

    题目描述 Fennec and Snuke are playing a board game. On the board, there are N cells numbered 1 through N ...

  8. 68)PHP,cookie的详细属性和有效期

    (1)cookie的有效期: 默认:会话周期结束(就是浏览器关闭),默认情况下,cookie会在浏览器关闭时失效,这种cookie是 临时cookie或者叫会话. 支持设置有效期,setcookie的 ...

  9. Oracle中实现sql查询得到连续号码段

    一.表名为t的表中数据如下: select * from t; FPHM KSHM ---------- ---------- 实现代码如下: select b.fphm,min(b.kshm),ma ...

  10. 利用卷积神经网络实现MNIST手写数据识别

    代码: import torch import torch.nn as nn import torch.utils.data as Data import torchvision # 数据库模块 im ...