JavaScript获取浏览器信息查看是否是谷歌或火狐等 -六月初技术站

JavaScript获取浏览器信息查看是否是谷歌或火狐等

六月初 JavaScipt 2023-06-08 22:55:13

功能开发中会根据不同浏览器来定义不同的功能点，这个时候就需要检测出当前项目是在什么浏览器上运行的。

最终根据当前使用的浏览器来运行对应的功能，那么在js中如何来识别不同的浏览器呢？

这里就不得不介绍Navigator userAgent 属性

什么是Navigator userAgent？

userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。

检测完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function getExplore(){
			 var Sys = {}; 
			 var ua = navigator.userAgent.toLowerCase(); 
			 var s; 
			 (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
			 (s = ua.match(/msie ([\d\.]+)/)) ? Sys.ie = s[1] : 
			 (s = ua.match(/edge\/([\d\.]+)/)) ? Sys.edge = s[1] :
			 (s = ua.match(/firefox\/([\d\.]+)/)) ? Sys.firefox = s[1] : 
			 (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? Sys.opera = s[1] : 
			 (s = ua.match(/chrome\/([\d\.]+)/)) ? Sys.chrome = s[1] : 
			 (s = ua.match(/version\/([\d\.]+).*safari/)) ? Sys.safari = s[1] : 0; 
			  // 根据关系进行判断
			 if (Sys.ie) return ('IE: ' + Sys.ie); 
			 if (Sys.edge) return ('EDGE: ' + Sys.edge);
			 if (Sys.firefox) return ('Firefox: ' + Sys.firefox); 
			 if (Sys.chrome) return ('Chrome: ' + Sys.chrome); 
			 if (Sys.opera) return ('Opera: ' + Sys.opera); 
			 if (Sys.safari) return ('Safari: ' + Sys.safari);
			 return 'Unkonwn';
			}
			console.log(getExplore())
			//获得浏览器名称
			function getExploreName(){
			   var userAgent = navigator.userAgent;
			   if(userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1){
			     return 'Opera';
			   }
			   else if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1){
			     return 'IE';
			   }
			   else if(userAgent.indexOf("Edge") > -1){
			      return 'Edge';
			   }
			   else if(userAgent.indexOf("Firefox") > -1){
			      return 'Firefox';
			   }
			   else if(userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1){
			     return 'Safari';
			   }
			   else if(userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1){
			      return 'Chrome';
			   }
			   else if(!!window.ActiveXObject || "ActiveXObject" in window){
			      return 'IE>=11';
			   }
			   else{
			    return 'Unkonwn';
			   }
			}
			console.log(getExploreName())
		</script>
	</body>
</html>