其它基础 - 判断浏览器 ¶

作者：KK
发表日期：2016.3.3

我们可以通过navigator对象的userAgent属性来识别用户正在使用怎样的浏览器

if(navigator.userAgent.indexOf('Chrome')){
	alert('你正在使用Chrome浏览器');
}

navigator对象就是浏览器对象,其中附带的都是浏览器相关的信息,你可以执行console.log(navigator)看看它里面有些什么方法和属性

其中userAgent属性是一个字符串,它是浏览器的简要描述,比如版本和内核说明等,通过在这个字符串中查找某些特征的字符串来实现,下面给一个完整的例子,可以用不同的浏览器来打开页面看看有没有判断正确

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>判断浏览器</title>
<script type="text/javascript">
function getBrowserName(){
	var agent = navigator.userAgent;
	
	//Chrome浏览器和包装了Chrome内核的浏览器样本
	//agent = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36';

	//火狐浏览器
	//agent = 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0';

	//IE浏览器
	//agent = 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)';

	//Opera
	//agent = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36 OPR/35.0.2066.92';
	
	agent = agent.toLowerCase();
	var isOpera = agent.indexOf('opr') > -1;
	if(isOpera){
		return 'Opera';
	}else if(agent.indexOf('firefox') > -1){
		return 'Firefox';
	}else if(agent.indexOf('chrome') > -1){
		return 'Chrome';
	}else if(agent.indexOf('safari') > -1){
		return 'Safari';
	}else if(agent.indexOf('trident') > -1){
		return 'IE';
	}
}
</script>
</head>
<body>
	<script type="text/javascript">
	document.write('你正在使用的是 ' + getBrowserName() + '浏览器');
	</script>
</body>
</html>

其实开发浏览器并不是一件简单的事情,所以并不是一般的软件公司能做得起的事情,主要的浏览器目前我所知就是微软的IE和Edge,苹果的Safari,Mozilla的Firefox和Google的Chrome等

目前即使是腾讯的QQ浏览器和奇虎的360浏览器都是将Chrome和IE浏览器封装成两个内核,外面加个壳来提供切换的双核浏览器,所以如果你用的是国内某些厂商的浏览器的话,以上代码可能会识别为Chrome浏览器或者IE浏览器(看你当前设置的内核/浏览模式),比如极速模式就是Chrome,兼容模式就是IE,反正这些浏览器真正渲染HTML呈现页面,运行JS这些都是相关内核实现的,不是这些浏览器厂商实现的