1.能力檢測
//能力檢測的目標不是識別瀏覽器，而是識別瀏覽器的能力。它對於想知道某個特性是否會按照適當方式行事（而不僅僅是某個特性存在）非常有用。
//采用這種方式不必顧忌特定的瀏覽器如何如何，只要確定瀏覽器支持特定的能力，就可以給出解決方案。能力檢測基本模式如下：
if(object.propertyInQuestion){
//使用object.propertyInQuestion
}
//例如，IE5.0之前的版本不支持document.getElementById()，可以使用document.all()實現相同的目的。
function getElement(id){
if(document.getElementById){
return document.getElementById(id);
}else if(document.all){
return document.all(id);
}else{
throw new Error("No way to retrive element !")
}
}

//在可能的情況下，要盡量使用typeof進行能力檢測。
//isHostMethod()用於在瀏覽器環境下測試任何對象的某個特性是否存在
function isHostMethod(object,property){
var t = typeof object[property];
return t == "function" || (!!(t == "object" && object[property])) || t == "unkown" ;
}

result = isHostMethod(xhr,"open");//true

//能力檢測並不是瀏覽器檢測。檢測某個或某幾個特性並不能確定瀏覽器。
//確定瀏覽器是否支持Netscape風格的插件
var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);
//確定瀏覽器是否具有DOM1級規定的能力
var hasDOM1 = !!(document.getElementById && document.createElement && document.getElementsByTagName);

2.怪癖檢測
//怪癖檢測的目標是識別瀏覽器的特殊行為。是想要知道瀏覽器存在什麽缺陷。通常需要運行一小段代碼，以確定某一特性不能正常工作。
//如IE8及更早的版本中個存在一個bug，如果某個實例屬性與[[Enumerable]]標記為false的某個原型屬性同名，那麽該實例屬性將不會出現在for-in循環中。
var hasDontEnumQuirk = function(){
var o = { toString :function(){} };
for (var prop in o){
if(prop == "toString"){
return false;
}
}

return true;
}();
//Safari3以前版本會枚舉被隱藏的屬性。
function hasEnumShadowsQuirk = function(){
var o = { toString : function(){} };
var count = 0;
for (var prop in o){
if(prop == "toString"){
count ++;
}
}

return (count > 1);
}();

3.用戶代理檢測
//通過檢測用戶代理字符串來確定實際使用的瀏覽器。在每一次HTTP請求過程中，
//用戶代理字符串（指明瀏覽器的名稱和版本號）是作為響應頭部發送的，
//可以通過navigator.userAgent屬性訪問。（這種方式比較常用於服務端，客戶端並不常用）
//IE的引擎是Trident，Firefox->Gecko，Safari->Webkit（是KHTML的一個分支，後來獨立出來）
//Chrome->Webkit，Opera以前是Presto現在是Webkit
//移動操作系統Android/iOS默認的瀏覽器都基於Webkit

// 用戶代理字符串檢測技術
// client用於保存相關信息
var client = function(){
// 1.識別呈現引擎
var engine = {
//呈現引擎
ie: 0,
gecko: 0,
webkit: 0,
opera: 0,
// 具體的版本號
ver: null
};
//2.識別瀏覽器
var browser = {
//瀏覽器
ie: 0,
firefox: 0,
safari: 0,
konq: 0,
opera: 0,
chrome: 0,
//具體的版本號
ver: null
};
//3.識別平臺
var system = {
win: false, //表示window平臺
mac: false, //表示Mac平臺
xll: false //表示Unix平臺

//5.識別移動設備
iphone: false,
ipod: false,
ipad: false,
ios: false,
andriod: false,
nokiaN: false,
winMobile: false,

//6.識別遊戲系統 Wii、PlayStation
wii: false,
ps: false
};

var ua = navigator.userAgent;

//要正確的識別呈現引擎，關鍵是檢測順序要正確。
if(window.opera){//第一步要識別的就是Opera，因為它的用戶代理字符串有可能完全模仿其他瀏覽器。
engine.ver = browser.ver = window.opera.version;
engine.opera = browser.opera = parseFloat(engine.ver);
}else if(/AppleWebkit\/(\S+)/.test(ua)){//第二步是檢測Webkit，因為它的用戶代理字符串中包含“gecko”和“KHTML”，如果首先檢測它可能會得出錯誤結論。
engine.ver = RegExp["$1"];
engine.webkit = parseFloat(engine.ver);
//確定是chrome還是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{
//近似的確定版本號
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)){//第三步要檢測的是KHTML，同樣KHTML也帶有“Gecko”，所以在排除KHTML之前無法檢測基於gecko的瀏覽器
engine.ver = browser.ver = RegExp["$1"];
engine.khtml = browser.konq = parseFloat(engine.ver);
}else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){//第四步檢測Gecko，因為它的用戶代理字符串中會出現"rv:"。
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)){//最後一步檢測IE
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.xll = (p.indexOf("Xll") == 0 || (p.indexOf("Linux") == 0));

//4.識別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";
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"];
}
}
}
//移動設備
system.iphone = ua.indexOf("iPhone") > -1;
system.ipod = ua.indexOf("iPod") > -1;
system.ipad = ua.indexOf("iPad") > -1;
system.nokiaN = ua.indexOf("NokiaN") > -1;

if(system.win == "CE"){//檢測Windows Phone
system.winMobile = system.win;
if(/Windows Phone OS (\d+.\d+)/.test(ua)){
system.win = "Phone";
system.winMobile = parseFloat(RegExp["$1"]);
}
}

if(system.mac && ua.indexOf("Mobile") > -1){//檢測iOS版本
if(/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
system.ios = parseFloat(RegExp.$1.replace("_","."));
}else{
system.ios = 2;//不能正真檢測出來，只能猜
}
}

if(/Andriod (\d+\.\d+)/.test(ua)){//檢測Andriod版本
system.andriod = parseFloat(RegExp.$1);
}

//檢測遊戲系統
system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua);

//在此檢測呈現引擎、平臺和設備
return {
engine : engine,
browser : browser,
system : system
};

}();

客戶端檢測