首页 > 代码库 > 客户端检测技术
客户端检测技术
客户端检测是javascript开发中最具争议的一个话题，由于浏览器之间存在差别，通常需要根据不同的浏览器能力分别编写不同的代码。
能力检测:
在编写代码之前先检测浏览器的能力。
例如，脚本在调用某个函数之前，可能先检测该函数是否存在。这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来，让它们把注意力集中到相应的能力是否存在上。能力无法精确地检测特定的浏览器和版本。
怪癖检测：
怪癖实际上是浏览器实际中存在的bug,例如早期的Webkit中就存在一个怪癖，即它会在for-in循环中返回被隐藏的属性。怪癖检测通常设计到运行一小段代码，然后确定浏览器是否存在某个怪癖。怪癖检测应该只在某个怪癖会干扰脚本运行的情况下使用。
用户代理检测：
通过检测用户代理字符串类识别浏览器。用户代理字符串中包含大量与浏览器有关的信息，包括浏览器、平台、操作系统即浏览器版本。
检测优先级：能力检测>怪癖检测>用户代理检测（因为用户代理检测对用户代理字符串具有很强的依赖性）
《javascript高级程序设计》提供一下用户代理检测方法：
var client = function(){ //呈现引擎 var engine = { ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, //完整的版本号 ver: null }; // 浏览器 var browser = { //主要浏览器 ie: 0, firefox: 0, konq: 0, chrome: 0, safari: 0, // 具体版本号 ver: null }; // 平台、设备和操作系统 var system = { win: false, mac: false, x11: false, // 移动设备 iphone: false, ipod: false, nokiaN: false, winMobile: false, macMobile: false, // 游戏系统 wii: false, ps: false }; // 检测呈现引擎和浏览器 var ua = navigator.userAgent; /* 在每一次HTTP请求过程中，用户代理字符串是作为响应首部发送的，可以通过navigator.userAgent属性访问 呈现引擎： IE——————mozilla gecko————————Firefox，当初gecko作为通过mozilla浏览器一部分开发 safari———————webkit，apple公司发布的web浏览器 chrome———————webkit IOS和Android默认的浏览器都基于webkit */ 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); // 确定是 Chrmoe 还是 Safari if(/Chrmoe\/(\S+)/.test(ua)){ browser.ver = RegExp["$1"]; browser.chrome = parseFloat(browser.ver); } else if(/Version\/(\S+)/.test(ua)){ browser.ver = RegExp["$1"]; browser.safri = 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) || /Knoqueror\/([^;]+)/.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 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); } // 检测浏览器 browser.ie = engine.ie; browser.opera = engine.opera; // 检测平台 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0 ); // 检测 windows操作系统 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"; brreak; case "5.1": system.win = "xp"; break; case "6.0": system.win = "Vista"; break; case "6.1": system.win = " Win7"; break; default: system.win = "NT"; break; } } else if (RegExp["$1"]){ system.wein = "ME"; } else { system.win = RegExp["$1"]; } } } // 移动设备 system.iphone = ua.indexOf("iPhone") > -1; system.ipod = ua.indexOf("iPod") > -1; system.nokiaN = ua.indexOf("NokiaN") > -1; system.winMobile = (system.win == "CE"); system.macMobile = (system.iphone || system.ipod); // 游戏系统 system.wii = ua.indexOf("Wii") > -1; system.ps = /playstation/i.test(ua); // 返回这些对象 return { engine: engine, browser: browser, system: system };}();
经验总结：
1，先检测达成目的的最常用特性，早期的ie不存在document.getElementById(),,应该先检测document.getElementById()后检测document.all。先检测最常用的特性可以保证代码最优化，因为在多数情况下都可以避免测试多个条件
2，测试到具体要用的特性。某个特性存在不一定意味着另外一个特性也存在。同时某个属性的存在不能确定对象是否存在该函数。例如，var result = isSortable({ sort : true})，并不能确定对象是否支持排序，最好的的方式是检测sort是不是一个函数：
function isSortable(object){
return typeof object.sort == "function";
}
但值得一提的是，ie8及其更早版本中的宿主对象是同归COM而非JScript实现，因此typeof document.createElement返回的是‘object‘而非‘function‘