javascript客户端检测浏览器

写在前面的话

在以前，总是以为使用用户代理字符串检测浏览器是那种类型就行了，这样确实打错特错啊，下面就来说说吧。

一、能力检测

在编写代码之前先检测浏览器的能力。例如，脚本在调用某个函数之前，可能要先检测该函数是否存在。缺点就是能力检测无法精确地检测特定的浏览器和版本。

例如：

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 return element");
     }
}

二、怪癖检测

怪癖实际上是浏览器实现中存在的bug，例如在早期的webkit中就存在中一个怪癖，即它会在for-in循环中返回被隐藏的属性。怪癖检测通常涉及到运行一小段代码，来确定浏览器是否存在怪癖。缺点跟能力检测一样，无法精确地检测特定的浏览器和版本。

例如：

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

三、用户代理检测

通过检测用户代理字符串来识别浏览器。用户代理字符串包含大量与浏览器相关的信息，包括浏览器、平台、操作系统及浏览器版本。用户代理检测需要特殊的技巧，特别是要注意opera会隐瞒用户代理字符串的情况。即便如此，通过用户代理字符串仍然能够检测出浏览器所用的呈现引擎和所在的平台，包括移动设备和游戏系统。

下面准备一个使用代理字符串检测浏览器的呈现引擎及其版本、浏览器类型及版本以及平台和设备

var clent = function(){
	//呈现引擎
	var engine = {
		ie:0,
		gecko:0,
		webkit:0,
		khtml:0,
		opera:0,
		
		//具体版本
		ver:null
	};
	
	//浏览器
	var browser = {
		ie:0,
		firefox:0,
		konq:0,
		opera:0,
		safari:0,
		chrome:0,
		
		//具体的版本
		ver:null
	};
	
	//平台
	var system = {
		win:false,
		mac:false,
		xll:false,
		
		//移动设备
		iphone:false,
		ipod:false,
		nokiaN:false,
		winMobile:false,
		macMobile:false
	};
	
	var ua = navigator.userAgent;
	
	//判断opera
	if(window.opera){
		engine.ver = browser.ver = window.opera.version();
		engine.opera = browser.opera = parseFloat(engine.ver);
	}
	//判断webkit
	else if(/AppleWebKit\/(\S+)/.test(ua)){
		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;
		}
	}
	//判断khtml
	else if(/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
		engine.ver = browser.ver = RegExp['$1'];
		engine.khtml = browser.konq = parseFloat(engine.ver);
	}
	//判断Gecko
	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);
		}
	}
	//判断ie
	else if(/MSIE ([^;]+)/.test(ua)){
		engine.ver = browser.ver = RegExp['$1'];
		engine.ie = browser.ie = parseFloat(engine.ver);
	}
	
	//平台
	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;
	
	system.iphone = ua.indexOf("iPhone") > -1;
	system.ipod = ua.indexOf("iPod") > -1;
	system.macMobile = (system.iphone || system.ipod);
	system.nokiaN = ua.indexOf("NokiaN") > -1;
	system.winMobile = (system.win == "CE");
	
	return {
		engine:engine,
		browser:browser,
		system:system
	};
}();