ECMAScript虽然是Javascript的核心，但是要在web中使用Javascript，那么BOM才是核心，BOM为我们提供了操作访问浏览器对象的借口，
但是由于BOM没有标准规范，导致存在不一致的问题，所以这里需要客户端检测的方法，突破局限。
先找出设计通用的的方案，然后再使用特定与浏览器的技术增强该方案。
一、能力检测
能力检测的目的不是识别浏览器，而是识别浏览器的能力。不必顾及特定的浏览器，只需确定浏览器支持特定的能力。
//浏览器检测的基本模式
if(object.property){
使用object.property
}
先检测常用的特性，保证了代码最优化。
//上个例子中的代码利用类型转换来确定某个对象是否存在，但这不能保证该成员是不是想要的。
这里更可靠的能力检测
function betterCheck(property){
return (typeof object.property == "function");
}
二、怪癖检测
怪癖检测的目标是识别浏览器的特殊行为。只是检测浏览器的存在缺陷。
//例如
早期IE8中，如果实例属性与[[enumerable]]为false的某个原型同名，那么这个属性遍不会被for-in循环枚举。可以通过下面的代码来检测这个”怪癖“
var hasEnumQuirk = function () {
var o = { toString : function () {} };
for (var pro in o ){
if(pro == "toString")
return false;
}
return true;
}
怪癖一般都是浏览器所独有的，通常被归为bug，一般仅检测有直接影响的“怪癖”。
三、用户代理检测
在浏览器每次发送的http时，都会将userAgent用户代理字符串作为响应首部发送，可以通过navigator.userAgent访问。
由于经过浏览器大战，现在的浏览器的用户代理都是通过电子欺骗来指定一些误导信息，欺骗服务器。
1、识别呈现引擎
//为了减少全局变量，这里使用增强模块模式。在内部声明了浏览器的呈现引擎，浏览器版本和平台信息
var client = (function () {
//呈现引擎
var engine = {
ie : 0,
gecko : 0,
webkit : 0,
khtml : 0,
opera : 0,
ver : null
};
//浏览器版本
var broswer = {
ie : 0,
firefox : 0,
chrome : 0,
safari : 0,
konq : 0,
opera : 0,
ver : null
};
//平台信息
var system = {
win : false,
mac : false,
x11 : false,
//移动设备
iphone : false,
ipod : false,
ipad : false,
ios : false,
andriod : false,
nokia : false,
winMobile : false,
//游戏平台
will : false,
ps : false
};
//用户代理检测
var ua = navigator.userAgent;
//opera会将自己完全伪造成其他浏览器所以先检测它
if (window.opera){
engine.opera = broswer.opera = parseInt(engine.ver);
engine.ver = broswer.ver = window.opera.version();
}else if (/AppleWebKit/(S+)/.test(ua)){
//webkit引擎的独有特征是AppleWebKit，利用正则表达式来获取版本号
engine.ver = RegExp.$1;
engine.webkit = parseInt(engine.ver);
//确认引擎后可以判断浏览器版本,chrome or safari
if (/chrome/(S+)/.test(ua)){
broswer.ver = RegExp.$1;
broswer.chrome = parseFloat(broswer.ver);
}else if (/Version/(S+)/.test(ua)){
broswer.ver = RegExp.$1;
broswer.safari = parseFloat(broswer.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;
}
broswer.ver = broswer.safari = safariVersion;
}
} else if (/KHTML/(S+)/.test(ua) || /Konqueror/[^;]+/.test(ua)){
engine.ver = broswer.ver = RegExp.$1;
engine.konq = broswer.konq = parseFloat(engine.ver);
} else if (/rv:([^)]+)) Gecko/d{8}/.test(ua)){
engine.ver = RegExp.$1;
engine.gecko = parseInt(engine.ver);
//是否是firefox浏览器
if (/firefox/(S+)/i.test(ua)){
broswer.ver = RegExp.$1;
broswer.firefox = parseFloat(broswer.ver);
}
//如果这里没有检测到的firefox岂不是没有浏览器的版本信息了？
} else if (/MSIE ([^;]+)/.test(ua)){
engine.ver = broswer.ver = RegExp.$1;
engine.ie = broswer.ie = parseFloat(engine.ver);
}
//检测浏览器，不已经检测过了吗？
broswer.ie = engine.ie;
broswer.opera = engine.opera;
//检测平台的开始自动判断平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.xll = (p == "X11" || p.indexOf("Linux") == 0);
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 = "Visita";
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;
}
}
}
system.iphone = ua.indexOf("iPhone") > -1;
system.ipod = ua.indexOf("ipod") > -1;
system.ipod = ua.indexOf("ipad") > -1;
system.nokia = ua.indexOf("NokiaN") > -1;
//windowMobile
if (system.win == "CE"){
system.winMobilem = system.win;
} else if (system.win == "Ph"){
if(/Windows Phone OS (d+.d+)/.test(ua)){
system.win = "Phone";
system.winMobilem = parseFloat(RegExp.$1);
}
}
//ios
if (system.mac $$ ua.indexOf("Mobile") > -1){
if (/CPU (?:iPhone ) ?OS (d+.d+)/.test(ua)){
system.iso = parseFloat(RegExp.$1.replace("_", "."));
} else {
system.iso = 2;
})
}
//检测安卓
if (/Andriod (d+ . d+)/.test(ua)){
system.andriod = parseFloat(RegExp.$1);
}
system.will = ua.indexOf("Wii") > -1;
system.ps = /PLAYSTATION/i.test(ua);
return {
engine : engine,
broswer : broswer,
system : system
};
})();
浏览器检测只是最后一中选择，只要有可能就应该优先采用能力检测和怪癖检测。适用以下三种情形：
1、不能直接准确的使用能力检测和怪癖检测
2、浏览器在不同平台下不同的能力，需要检测平台。
3、跟踪分析等目的需要知道确切的浏览器。
小结：
客户端检测时有争议的，由于浏览器之间存在差别，通常需要根据不同浏览器，写不同的代码。客户端检测的常用方法：
- 能力检测，在编写代码前，先检测浏览器的能力，把注意集中在浏览器的能力存在上。
- 怪癖检测，浏览器中的bug的检测。
- 用户代理检测，根据用户代理字符串来识别浏览器。
一般，优先考虑能力检测，怪癖检测时第二选择，引文用户代理检测对用户代理字符串的依赖非常强大。