9 客户端检测.md

第九章 客户端检测

不到万不得已，就不要使用客户端检测，先设计最通用的方案，然后再使用特定于浏览器的技术增强方案。

9.1能力检测

//基本模式
if (object.propertyInQuestion) {
	//使用object.propertyInQuestion
};

不是识别特定的浏览器，而是识别浏览器的能力。

9.1.1更可靠的能力检测

//更可靠的能力检测
//author:Peter Michaux
function isHostMethod(object, property) {
	var t = typeof object[property];
	return t == 'function' ||
		(!!(t == 'object' && object[property])) ||
		t == 'unknown';
}

result = isHostMe thod(xhr, 'open'); //true
result = isHostMethod(xhr, 'foo'); //false

9.2怪癖检测

对有直接影响的怪癖才进行检测，尽量再脚本开始的时候就进行检测。

9.3用户代理检测

可通过navigator.userAgent访问，对服务器端来说是较常用的做法，但再客户端得排在能力检测和怪癖检测之后。

9.3.1用户代理字符串的历史

略

9.3.2用户代理字符串检测技术

if (isIE6 || isIE7) { //不推荐，没考虑向后兼容	
}
if (ieVer >= 6) {} //可以

识别浏览器

var client = function() {
	var engine = {
		ie: 0,
		gecko: 0,
		webkit: 0,
		khtml: 0,
		opera: 0,
		ver: null
	};
	var browser = {
		ie: 0,
		firefox: 0,
		safari: 0,
		konq: 0,
		opera: 0,
		chrome: 0,
		ver: null
	};
	var system = {
		win: false,
		max: 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)) {
		engine.ver = browser.ver = RegExp["$1"];
		engine.khtml = browser.knoq = parseFloat(engine.ver);
	} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
		engine.ver = RegExp["$1"];
		engine.gecko = parseFloat(engine.ver);

		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.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;
	//WM
	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;
		}
	}
	//	检测安卓
	if (/Android (\d+\.\d+)/.test(ua)) {
		system.android = parseFloat(RegExp.$1);

	}

	//游戏系统
	system.wii = ua.indexOf('Wii') > -1;
	system.ps = /playstation/i.test(ua);
	//返回这些对象
	return {
		engine: engine,
		browser: browser,
		system: system
	};
}();