使用javascript检测浏览器版本

以下浏览器版本的判断方法参考了《JavaScript 高级程序设计》第八章。

总体上我们验证浏览器及其版本是通过浏览器的user-agent字符串来检测的。常见的有:

Safari: Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
Chrome: Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31
IE: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.2; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Firefox:Mozilla/5.0 (Windows NT 5.1; rv:19.0) Gecko/20100101 Firefox/19.0

因此对浏览器的版本分析都是基于该字符串中所包含的信息进行的。可以通过如下代码获取user-agent信息:

var sUserAgent = navigator.userAgent;    

Opera浏览器检测

var isOpera = sUserAgent.indexOf("Opera") > -1;
if (isOpera) {
	//检测是否进行了伪装
	if (navigator.appName == 'Opera') {
		version = parseFloat(navigator.appVersion);//没有伪装,直接获取版本号
	} else {
		var reOperaVersion = new RegExp("Opera (\\d+.\\d+)");
        //使用正则表达式的test方法测试并将版本号保存在RegExp.$1中
		reOperaVersion.test(sUserAgent);
		version = parseFloat(RegExp['$1']);
	}
}

Google Chrome浏览器检测

var isChrome = sUserAgent.indexOf("Chrome") > -1;
if (isChrome) {
	var reChorme = new RegExp("Chrome/(\\d+\\.\\d+(?:\\.\\d+\\.\\d+))?");
	reChorme.test(sUserAgent);
    version = parseFloat(RegExp['$1']);
}

IE浏览器检测

// !isOpera 避免是由Opera伪装成的IE  
var isIE = sUserAgent.indexOf("compatible") > -1
		&& sUserAgent.indexOf("MSIE") > -1 && !isOpera;
if (isIE) {
	var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
	reIE.test(sUserAgent);
	version = parseFloat(RegExp['$1']);
}

Konqueror/Safari 浏览器检测

//排除Chrome信息,因为在Chrome的user-agent字符串中会出现Konqueror/Safari的关键字
var isKHTML = (sUserAgent.indexOf("KHTML") > -1
		|| sUserAgent.indexOf("Konqueror") > -1 || sUserAgent
		.indexOf("AppleWebKit") > -1)
		&& !isChrome;

if (isKHTML) {//判断是否基于KHTML,如果是的话在继续判断属于何种KHTML浏览器
	var isSafari = sUserAgent.indexOf("AppleWebKit") > -1;
	var isKonq = sUserAgent.indexOf("Konqueror") > -1;

	if (isSafari) {
		var reAppleWebKit = new RegExp("Version/(\\d+(?:\\.\\d*)?)");
		reAppleWebKit.test(sUserAgent);
		var fAppleWebKitVersion = parseFloat(RegExp["$1"]);
		version = parseFloat(RegExp['$1']);
	} else if (isKonq) {
		var reKong = new RegExp(
				"Konqueror/(\\d+(?:\\.\\d+(?\\.\\d)?)?)");
		reKong.test(sUserAgent);
		version = parseFloat(RegExp['$1']);
	}
}

Mozilla FireFox浏览器检测

//排除Chrome 及Konqueror/Safari的伪装
var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isChrome && !isKHTML;
if (isMoz) {
	var reMoz = new RegExp("rv:(\\d+\\.\\d+(?:\\.\\d+)?)");
	reMoz.test(sUserAgent);
	version = parseFloat(RegExp['$1']);
}

基本上浏览器的判断就到此为止,其他浏览器不做说明。可以使用

console.info(navigator.userAgent);  

提示的信息具体分析相应浏览器的user-agent,然后进行过处理获取浏览器个性信息及版本。

完整的代码

var broswer = function() {
	var _broswer = {};
	var sUserAgent = navigator.userAgent;
	console.info("useragent: ", sUserAgent);

	var isOpera = sUserAgent.indexOf("Opera") > -1;
	if (isOpera) {
		//首先检测Opera是否进行了伪装
		if (navigator.appName == 'Opera') {
            //如果没有进行伪装,则直接后去版本号
			_broswer.version = parseFloat(navigator.appVersion);
		} else {
			var reOperaVersion = new RegExp("Opera (\\d+.\\d+)");
            //使用正则表达式的test方法测试并将版本号保存在RegExp.$1中
			reOperaVersion.test(sUserAgent);
			_broswer.version = parseFloat(RegExp['$1']);
		}
		_broswer.opera = true;
	}

	var isChrome = sUserAgent.indexOf("Chrome") > -1;
	if (isChrome) {
		var reChorme = new RegExp("Chrome/(\\d+\\.\\d+(?:\\.\\d+\\.\\d+))?");
		reChorme.test(sUserAgent);
		_broswer.version = parseFloat(RegExp['$1']);
		_broswer.chrome = true;
	}

	//排除Chrome信息,因为在Chrome的user-agent字符串中会出现Konqueror/Safari的关键字
	var isKHTML = (sUserAgent.indexOf("KHTML") > -1
			|| sUserAgent.indexOf("Konqueror") > -1 || sUserAgent
			.indexOf("AppleWebKit") > -1)
			&& !isChrome;

	if (isKHTML) {//判断是否基于KHTML,如果时的话在继续判断属于何种KHTML浏览器
		var isSafari = sUserAgent.indexOf("AppleWebKit") > -1;
		var isKonq = sUserAgent.indexOf("Konqueror") > -1;

		if (isSafari) {
			var reAppleWebKit = new RegExp("Version/(\\d+(?:\\.\\d*)?)");
			reAppleWebKit.test(sUserAgent);
			var fAppleWebKitVersion = parseFloat(RegExp["$1"]);
			_broswer.version = parseFloat(RegExp['$1']);
			_broswer.safari = true;
		} else if (isKonq) {
			var reKong = new RegExp(
					"Konqueror/(\\d+(?:\\.\\d+(?\\.\\d)?)?)");
			reKong.test(sUserAgent);
			_broswer.version = parseFloat(RegExp['$1']);
			_broswer.konqueror = true;
		}
	}

	// !isOpera 避免是由Opera伪装成的IE  
	var isIE = sUserAgent.indexOf("compatible") > -1
			&& sUserAgent.indexOf("MSIE") > -1 && !isOpera;
	if (isIE) {
		var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
		reIE.test(sUserAgent);
		_broswer.version = parseFloat(RegExp['$1']);
		_broswer.msie = true;
	}

	// 排除Chrome 及 Konqueror/Safari 的伪装
	var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isChrome && !isKHTML;
	if (isMoz) {
		var reMoz = new RegExp("rv:(\\d+\\.\\d+(?:\\.\\d+)?)");
		reMoz.test(sUserAgent);
		_broswer.version = parseFloat(RegExp['$1']);
		_broswer.mozilla = true;
	}
	return _broswer;
}

// 调用
var broswer = broswer();
console.info("broswer.version: ", broswer.version);
console.info("broswer.msie is ", broswer.msie);
console.info("broswer.safari is ", broswer.safari);
console.info("broswer.opera is ", broswer.opera);
console.info("broswer.mozilla is ", broswer.mozilla);
console.info("broswer.chrome is ", broswer.chrome);
console.info("broswer.konqueror is ", broswer.konqueror);