第9章 客户端检测

1.能力检测
能力检测的基本模式：

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

概念
1.检测达成目的的最常用特性
2.必须测试实际要用到的特性，一个特性存在，不代表另一个特性也存在

更可靠的能力检测
尽量使用typeof

function isSortable(object){
	return typeof object.sort=="function"
}

IE8及之前版本中
typeof document.creatElement() 会返回object
typeof xhr.open 会返回unknown
可以对方法进行增强

function isHostMethod(object，property){
	var t = type of object[property]; 
	return t=="function" || 
	(!!t=='object'&& object[property]) ||
	t=='unknown';
}
result=isHostMethod(xhr,'open') //true
result=isHostMethod(xhr,'foo') //false

注意能力检测不是浏览器检测
检测某个或几个特性并不能够确定浏览器。
可以根据浏览器特性不同组合检测

// 确定浏览器是否支持Netscaper风格的插件
var hasNSPligins = !!(navigator.plugins&&navigator.plugins.length);
var hasDOM1=!!( document.getElementById && document.creatElement &&
 document.getElementsByTagName);

怪癖检测
用于检测浏览器有什么BUG

用户代理检测
万不得已才使用，有可能被电子欺骗
http请求过程中，用户代理字符串是作为响应首部发送。
通过navigator.userAgent属性访问

识别呈现引擎&浏览器&平台设备操作系统
五大引擎 IE Gecko WebKit KHTML Opera

var client =function(){
	var engine={
		ie:0,
		gecko:0,
		webkit:0,
		opera:0,
		khtml:0,
		ver:null
	};
	var browser={
		ie:0,
		firefox:0,
		safari:0,
		konq:0,
		opera:0,
		chrome:0,
		ver:null
	};
	var system={
		win:false,
		mac:false,
		x11:false,
		//移动设备
		iphone:false,
		ipod:false,
		ipad:false,
		ios:false,
		android:false,
		nokiaN:false,
		winMobile:false,
		//游戏系统
		wii:false,
		ps:false,
	};
	
}()
//检测呈现引擎和浏览器
var ua =navigator.userAgent
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);
	//确定是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)){
	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.win=p.indexOf("Mac")==0;
system.win=p.indexOf("X11")==0 || (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";
					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;

//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"]);
	}
}

//检测IOS
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 //不能真正检测出来 所以只能猜测
	}
}

//检测Android系统
if(/Android (\d+\.\d+)/test(ua)){
	system.android=parseFloat(RegExp["$1"]);
}

//游戏系统
system.wii=ua.indexOf("Wii")>-1;
system.ps=/palystation/i.test(ua);

return {engine:engine,browser:browser,system:system};