JavaScript判断浏览器类型及版本

最新推荐文章于 2020-12-23 15:45:18 发布
最新推荐文章于 2020-12-23 15:45:18 发布
阅读量86 收藏
点赞数
分类专栏： 技术杂谈 文章标签： 浏览器 JavaScript 应用服务器 Chrome Opera ViewUI

      说明：以下内容参考了一些网上资料以及同事间的一些讨论。

 

      浏览器对于我们来说，可能是最熟悉的工具了。记得最早那会Netscape，到后来的Internet Explorer一统江湖，再到现在的FireFox大行其道，浏览器市场的争夺，可谓是硝烟弥漫。除了我们常见的IE, Firefox, Opera, Safari四大金刚以外，新近又出了一位Chrome，虽然新出，但是出于Google这个名门，Chrome所受到的关注绝不亚于先前的四大金刚，看来以后要改为5朵金花了，呵呵。除了这些熟知的浏览器以外，据说世界上还有近百种浏览器(汗！！套用一句话：世界上怎么有这么多人喜欢重复发明轮子呢？O(∩_∩)O哈哈~)。


      在我们的产品开发过程中，经常要考虑浏览器兼容问题，以适应不同的用户人群，同时也减少因浏览器兼容问题所带来的服务量。一般来说，通过JavaScript判断浏览器类型，我们通常使用两种方法，一种是根据各种浏览器独有的属性来分辨，另一种是通过分析浏览器的user-Agent属性来判断的。在许多情况下，值判断出浏览器类型之后，还需判断浏览器版本才能处理兼容性问题，而判断浏览器的版本一般只能通过分析浏览器的User-Agent才能知道。现在比较流行的javascript框架，都有浏览器兼容的判断代码，像jquery、YUI就是使用User-Agent，而Mootools则是使用用各种浏览器独有的属性来分辨。

      先来看看什么是User-Agent？User-Agent是HTTP请求中的用户标识，一般发送一个能够代表客户端类型的字符串，比如浏览器类型 操作系统等信息。User-Agent 的约定格式是：应用名，跟一个斜线，跟版本号，剩下的是自由的格式。

      我们先来看一下五朵金花的User-Agent：

      IE

      Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)
      Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)
      Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
      Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
      其中，版本号是MSIE之后的数字。

      Firefox

      Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1
      Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3
      Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12
      其中，版本号是Firefox之后的数字。

      Opera

      Opera/9.27 (Windows NT 5.2; U; zh-cn)
      Opera/8.0 (Macintosh; PPC Mac OS X; U; en)
      Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0
      其中，版本号是靠近Opera的数字。

      Safari

      Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13
      Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
      其版本号是Version之后的数字。

      Chrome

      Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13
      其中，版本号在Chrome只后的数字。

 

      一.基于User-Agent信息的实现

 

var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; 

//以下进行测试
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);

 

    二.根据浏览器特有属性判断

 

var Browser = {
	Engine: {name: 'unknown', version: 0},
	Features: {
		xpath: !!(document.evaluate),     // 是否支持 XPath
		air: !!(window.runtime),        // 是否支持 Air 扩展
		query: !!(document.querySelector) // 是否支持 CSS 选择器
	},
	Engines: {
		// 判断 Opera        
		presto: function() {            
			return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925));},        
		// 判断 IE，根据 ActiveX 和 特有的 XMLHttpRequest 对象        
		trident: function() {  
			return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? 5 : 4);},        
			// Webkit 核心的浏览器，如 Safari 和 Chrome        
		webkit: function() {
			return (navigator.taintEnabled) ? false : ((Browser.Features.xpath) ? ((Browser.Features.query) ? 525 : 420) : 419);},        
			// Mozilla Gecko 核心浏览器，如 Firefox        
		gecko: function() {            
			return (document.getBoxObjectFor == undefined) ? false : ((document.getElementsByClassName) ? 19 : 18);}    
	}
}; 
Browser.detect = function() {
	for (var engine in this.Engines){        
		var version = this.Engines[engine]();        
		// 如果具有特定的浏览器对象        
		if (version){            
			this.Engine = {name: engine, version: version};            
			this.Engine[engine] = this.Engine[engine + version] = true;            
			break;        
		}    
	}    
	return {name: engine, version: version};
}; 
Browser.detect();

 或者

var Sys = {};
var ua = navigator.userAgent.toLowerCase();
window.ActiveXObject ? Sys.ie = ua.match(/msie ([\d.]+)/)[1] :
document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1] :
window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1] :
window.opera ? Sys.opera = ua.match(/opera.([\d.]+)/)[1] :
window.openDatabase ? Sys.safari = ua.match(/version\/([\d.]+)/)[1] : 0;
        
//以下进行测试
if(Sys.ie) document.write('IE: '+Sys.ie);
if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
if(Sys.opera) document.write('Opera: '+Sys.opera);
if(Sys.safari) document.write('Safari: '+Sys.safari);

 

      但是，这两种检测方法都有其局限性，User-Agent 是可以通过代码修改的，所以纯粹检测User-Agent可能会带来一定的风险，而且ie8的Compatibility View 功能造成单浏览器会“原生”多个 User-agent 。使用不同特征来判断浏览器的方法，
虽然在速度上比用正则表达式分析userAgent要来的快，不过这些特征可能会随浏览器版本而变化。比如，一种浏览器本来独有的特性取得了市场上的成功，其他浏览器也就可能跟着加入该特性，从而使该浏览器的独有特征消失，导致我们的判断失败。因此，
相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型。何况，反正判断版本信息也需要解析浏览器的userAgent的。所以，在我们的实际编程中，还得根据实际情况来决定使用哪种方法来判断浏览器类型和版本。

 

ppk on javascript中有关浏览器检测的看法和建议

 

1、Opera，iCab等非主流浏览器提供给用户自己修改识别字符串，以访问更多的网站。
2、Opera 在navigator.userAgent永远包含一个子字符串Opera，即使当它处于伪装模式时也一样。而且Opera是唯一支持window.opera属性的浏览器
3、Safari、iCab和Konqueror 在navigator.userAgent有它们自己的标识符，那他们也有可能不包含，为了伪装。
4、Gecko  Mozilla的识别字符串中通常包含Gecko，不过，Safari的默认字符串中也包含Gecko
5、MSIE 大部分浏览器都拿它来伪装，因此它的出现说明不了任何问题。

 

三.ppk中有关浏览器检测的代码

 

var BrowserDetect = {
 init: function () {
  this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
  this.version = this.searchVersion(navigator.userAgent)
   || this.searchVersion(navigator.appVersion)
   || "an unknown version";
  this.OS = this.searchString(this.dataOS) || "an unknown OS";
 },
 searchString: function (data) {
  for (var i=0;i<data.length;i++) {
   var dataString = data.string;
   var dataProp = data.prop;
   this.versionSearchString = data.versionSearch || data.identity;
   if (dataString) {
    if (dataString.indexOf(data.subString) != -1)
     return data.identity;
   }
   else if (dataProp)
    return data.identity;
  }
 },
 searchVersion: function (dataString) {
  var index = dataString.indexOf(this.versionSearchString);
  if (index == -1) return;
  return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
 },
 dataBrowser: [
  {
   string: navigator.userAgent,
   subString: "Chrome",
   identity: "Chrome"
  },
  {  string: navigator.userAgent,
   subString: "OmniWeb",
   versionSearch: "OmniWeb/",
   identity: "OmniWeb"
  },
  {
   string: navigator.vendor,
   subString: "Apple",
   identity: "Safari",
   versionSearch: "Version"
  },
  {
   prop: window.opera,
   identity: "Opera"
  },
  {
   string: navigator.vendor,
   subString: "iCab",
   identity: "iCab"
  },
  {
   string: navigator.vendor,
   subString: "KDE",
   identity: "Konqueror"
  },
  {
   string: navigator.userAgent,
   subString: "Firefox",
   identity: "Firefox"
  },
  {
   string: navigator.vendor,
   subString: "Camino",
   identity: "Camino"
  },
  {  // for newer Netscapes (6+)
   string: navigator.userAgent,
   subString: "Netscape",
   identity: "Netscape"
  },
  {
   string: navigator.userAgent,
   subString: "MSIE",
   identity: "Explorer",
   versionSearch: "MSIE"
  },
  {
   string: navigator.userAgent,
   subString: "Gecko",
   identity: "Mozilla",
   versionSearch: "rv"
  },
  {   // for older Netscapes (4-)
   string: navigator.userAgent,
   subString: "Mozilla",
   identity: "Netscape",
   versionSearch: "Mozilla"
  }
 ],
 dataOS : [
  {
   string: navigator.platform,
   subString: "Win",
   identity: "Windows"
  },
  {
   string: navigator.platform,
   subString: "Mac",
   identity: "Mac"
  },
  {
   string: navigator.platform,
   subString: "Linux",
   identity: "Linux"
  }
 ]

};
BrowserDetect.init();

document.write('你正在使用的是：' + BrowserDetect.browser + ' ' + BrowserDetect.version + ' on ' + BrowserDetect.OS + '!');
 
远牧
关注
专栏目录
JavaScript 判断浏览器类型及版本
12-04
几天前，浏览器家族有刚诞生了一位小王子，就是Google推出的Chrome浏览器。由于Chrome出生名门，尽管他还是个小家伙，没有人敢小看他。...JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属
利用JavaScript判断浏览器类型及版本
11-23
本文将介绍如何使用Javascript来检测浏览器的类型以及版本号，包括猎豹浏览器、搜狗浏览器、傲游浏览器、360极速浏览器、360安全浏览器、QQ浏览器、百度...JavaScript判断浏览器类型及版本</title> [removed]
写一段JavaScript脚本列出浏览器的信息
confirmAname的专栏
05-31 672
属性名属性值 for(var prop in navigator){ document.write(""+prop+""+navigator[prop]+""); }
php/js/jquery等各种语言版本—检测终端类型和浏览器类型
fengqingxin的专栏
05-29 120
&lt;?php if ( (strpos($_SERVER['HTTP_USER_AGENT'], "Mobile/") != false) &amp;&amp;(strpos($_SERVER['HTTP_USER_AGENT'], "Safari/") == false) ) { echo "Safari (in-app)"; } else {...
JS判断浏览器类型与版本
felixsyan的专栏
08-22 236
在JS中判断浏览器的类型，估计是每个编辑过页面的开发人员都遇到过的问题。在众多的浏览器产品中，IE、Firefox、Opera、Safari........众多品牌却标准不一，因此时常需要根据不同的浏览器，甚至相同浏览器不同版本做不同的操作，因此，知晓浏览器的判断方法，还是很重要的。下面列举一下常用的判断方法： 1、判断浏览器是否为IE         document.all ? 'IE' ...
js navicator对象、match方法
编程日常记录与总结 https://franciswmf.iteye.com
01-16 231
[code="java"] javascript的navigator对象 navigator为Window对象的一个属性，指向了一个包含浏览器相关信息的对象。 navigatot中包含了一些常用到的属性，如： navigator.appVersion 浏览器的版本号 navigator.appName 浏览器的名称 navigator.languag...
一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
热门推荐
小诺
11-26 7万+
在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题？ 百度源代码如下： 1 2 html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml> 3 head> 4 m
JavaScript判断浏览器类型及版本（整理）
sunny的专栏
10-13 9182
你知道世界上有多少种浏览器吗？除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外，世界上还有近百种浏览器。        几天前，浏览器家族有刚诞生了一位小王子，就是Google推出的Chrome浏览器。由于Chrome出生名门，尽管他还是个小家伙，没有人敢小看他。以后，咱们常说浏览器的“四大才子”就得改称为“五朵金花”了。        在网站前端开发中，浏览器
JS使用userAgent实现浏览器信息的获取
simplz的博客
06-09 3349
JS使用userAgent实现浏览器信息的获取<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>navigator</title> <script type="text/javascript"> function validB(){
Navigator appVersion 常用属性应用及判别
福小娟儿的博客
12-23 3524
判断当前机型 var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { console.log('安卓'); } else if (u.indexOf('iPhone') > -1) { console.log('苹果'); } 判断当前设备类别 设备类型 关键字段 IE内核 Trident opera内核 Presto 或 Opera
js判断浏览器版本(IE,FF,Chrome,Opear,Safari)
Harry Huang
03-30 1743
1. 五大浏览器判断 var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/))? Sys.ie = s[1]: (s = ua.match(/firefox
循环荷载三轴 pfc5.0 PFC5.0
最新发布
10-06
循环荷载三轴 pfc5.0 PFC5.0
光伏储能同步发电机simulink仿真模型 主电路：三相全桥逆变 直流侧电压800V 光伏模块：光伏板结合Boost电路应用MP
10-06
光伏储能同步发电机simulink仿真模型 主电路：三相全桥逆变 直流侧电压800V 光伏模块：光伏板结合Boost电路应用MPPT 储能模块：采用双闭环控制，外环直流母线电容稳压，内环为电池电流环控制 Matlab simulink 2021b及以上版本 仿真结果： 1.VSG仿真输出的功率可以无静差跟踪给定参考值 2.直流母线电容电压可以实现稳压功能，稳定时可以跟踪给定参考电压值 3.光伏模块MPPT算法输出最大功率波动很小，波形完美 4.在1s的时候给定直流母线电压参考值由800降为700V，可看到能够很好跟踪给定参考电压值 VSG输出电压电流THD都低于1%
深入剖析Oracle与MySQL在数据安全性方面的差异
10-06
数据库的安全性是任何依赖数据库存储敏感信息的组织最关心的问题之一。Oracle和MySQL作为两个主流的数据库管理系统，在数据安全性方面各有所长。本文将深入探讨Oracle与MySQL在数据安全性方面的差异，包括它们提供的安全性特性、最佳实践以及代码示例。 Oracle和MySQL在数据安全性方面都提供了强大的功能，但它们在特性和方法上存在差异。Oracle的安全性特性更为全面和高级，适合对安全性要求极高的企业级应用。MySQL则提供了基本的安全性功能，适合中小型项目和Web应用。了解这些差异有助于开发者在不同数据库系统间进行数据迁移或开发数据库应用程序时做出正确的选择。通过本文的分析和代码示例，读者应该能够更好地理解Oracle与MySQL在数据安全性方面的差异，并在实际开发中做出合适的选择。
JavaScript实现浏览器类型及版本检测
总结，JavaScript判断浏览器类型和版本的方法通常涉及解析`navigator.userAgent`，利用浏览器特有的API、方法或全局变量。随着浏览器技术的发展，有些检测方式可能不再适用，因此在实际开发中，推荐使用条件渐进增强...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值