JavaScript判断浏览器类型及版本

心已赠人 2022-08-06 14:15 170阅读 0赞

浏览器对于我们来说，可能是最熟悉的工具了。记得最早那会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 的约定格式是：[应用][Link 1]名，跟一个斜线，跟版本号，剩下的是自由的格式。  
  
      我们先来看一下五朵金花的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, \*\* Gecko) Version/3.1 Safari/525.13  
      Mozilla/5.0 (iPhone; U; CPU \*\* Mac OS X) AppleWebKit/420.1 (KHTML, \*\* Gecko) Version/3.0 Mobile/4A93 Safari/419.3   
      其版本号是Version之后的数字。  
  
      Chrome  
  
      Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, \*\* Gecko) Chrome/0.2.149.27 Safari/525.13  
      其中，版本号在Chrome只后的数字。  
  
      一.基于User-Agent信息的实现

1.  收藏代码  
    
2.  var Sys = \{\};    
    
3.  var ua = navigator.userAgent.toLowerCase();    
    
4.  var s;    
    
5.  (s = ua.match(/msie (\[\\d.\]+)/)) ? Sys.ie = s\[1\] :    
    
6.  (s = ua.match(/firefox\\/(\[\\d.\]+)/)) ? Sys.firefox = s\[1\] :    
    
7.  (s = ua.match(/chrome\\/(\[\\d.\]+)/)) ? Sys.chrome = s\[1\] :    
    
8.  (s = ua.match(/opera.(\[\\d.\]+)/)) ? Sys.opera = s\[1\] :    
    
9.  (s = ua.match(/version\\/(\[\\d.\]+).\*safari/)) ? Sys.safari = s\[1\] : 0;     
    
10.   
    
11. //以下进行测试    
    
12. if (Sys.ie) document.write('IE: ' + Sys.ie);    
    
13. if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);    
    
14. if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);    
    
15. if (Sys.opera) document.write('Opera: ' + Sys.opera);    
    
16. if (Sys.safari) document.write('Safari: ' + Sys.safari);

复制代码

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

1.  var Browser = \{    
    
2.  Engine: \{name: 'unknown', version: 0\},    
    
3.  Features: \{    
    
4.  xpath: !!(document.evaluate),     // 是否支持 XPath    
    
5.  air: !!(window.runtime),        // 是否支持 Air 扩展    
    
6.  query: !!(document.querySelector) // 是否支持 CSS 选择器    
    
7.  \},    
    
8.  Engines: \{    
    
9.  // 判断 Opera            
    
10. presto: function() \{                
    
11. return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925));\},            
    
12. // 判断 IE，根据 ActiveX 和 特有的 XMLHttpRequest 对象            
    
13. trident: function() \{      
    
14. return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? 5 : 4);\},            
    
15. // Webkit 核心的浏览器，如 Safari 和 Chrome            
    
16. webkit: function() \{    
    
17. return (navigator.taintEnabled) ? false : ((Browser.Features.xpath) ? ((Browser.Features.query) ? 525 : 420) : 419);\},            
    
18. // Mozilla Gecko 核心浏览器，如 Firefox            
    
19. gecko: function() \{                
    
20. return (document.getBoxObjectFor == undefined) ? false : ((document.getElementsByClassName) ? 19 : 18);\}        
    
21. \}    
    
22. \};

复制代码

或者

1.  var Sys = \{\};    
    
2.  var ua = navigator.userAgent.toLowerCase();    
    
3.  window.ActiveXObject ? Sys.ie = ua.match(/msie (\[\\d.\]+)/)\[1\] :    
    
4.  document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\\/(\[\\d.\]+)/)\[1\] :    
    
5.  window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\\/(\[\\d.\]+)/)\[1\] :    
    
6.  window.opera ? Sys.opera = ua.match(/opera.(\[\\d.\]+)/)\[1\] :    
    
7.  window.openDatabase ? Sys.safari = ua.match(/version\\/(\[\\d.\]+)/)\[1\] : 0;    
    
8.              
    
9.  //以下进行测试    
    
10. if(Sys.ie) document.write('IE: '+Sys.ie);    
    
11. if(Sys.firefox) document.write('Firefox: '+Sys.firefox);    
    
12. if(Sys.chrome) document.write('Chrome: '+Sys.chrome);    
    
13. if(Sys.opera) document.write('Opera: '+Sys.opera);    
    
14. 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中有关浏览器检测的代码

1.  var BrowserDetect = \{    
    
2.  init: function () \{    
    
3.    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";    
    
4.    this.version = this.searchVersion(navigator.userAgent)    
    
5.     || this.searchVersion(navigator.appVersion)    
    
6.     || "an unknown version";    
    
7.    this.OS = this.searchString(this.dataOS) || "an unknown OS";    
    
8.  \},    
    
9.  searchString: function (data) \{    
    
10.   for (var i=0;i<data.length;i++) \{    
    
11.    var dataString = data.string;    
    
12.    var dataProp = data.prop;    
    
13.    this.versionSearchString = data.versionSearch || data.identity;    
    
14.    if (dataString) \{    
    
15.     if (dataString.indexOf(data.subString) != -1)    
    
16.      return data.identity;    
    
17.    \}    
    
18.    else if (dataProp)    
    
19.     return data.identity;    
    
20.   \}    
    
21. \},    
    
22. searchVersion: function (dataString) \{    
    
23.   var index = dataString.indexOf(this.versionSearchString);    
    
24.   if (index == -1) return;    
    
25.   return parseFloat(dataString.substring(index+this.versionSearchString.length+1));    
    
26. \},    
    
27. dataBrowser: \[    
    
28.   \{    
    
29.    string: navigator.userAgent,    
    
30.    subString: "Chrome",    
    
31.    identity: "Chrome"    
    
32.   \},    
    
33.   \{  string: navigator.userAgent,    
    
34.    subString: "OmniWeb",    
    
35.    versionSearch: "OmniWeb/",    
    
36.    identity: "OmniWeb"    
    
37.   \},    
    
38.   \{    
    
39.    string: navigator.vendor,    
    
40.    subString: "Apple",    
    
41.    identity: "Safari",    
    
42.    versionSearch: "Version"    
    
43.   \},    
    
44.   \{    
    
45.    prop: window.opera,    
    
46.    identity: "Opera"    
    
47.   \},    
    
48.   \{    
    
49.    string: navigator.vendor,    
    
50.    subString: "iCab",    
    
51.    identity: "iCab"    
    
52.   \},    
    
53.   \{    
    
54.    string: navigator.vendor,    
    
55.    subString: "KDE",    
    
56.    identity: "Konqueror"    
    
57.   \},    
    
58.   \{    
    
59.    string: navigator.userAgent,    
    
60.    subString: "Firefox",    
    
61.    identity: "Firefox"    
    
62.   \},    
    
63.   \{    
    
64.    string: navigator.vendor,    
    
65.    subString: "Camino",    
    
66.    identity: "Camino"    
    
67.   \},    
    
68.   \{  // for newer Netscapes (6+)    
    
69.    string: navigator.userAgent,    
    
70.    subString: "Netscape",    
    
71.    identity: "Netscape"    
    
72.   \},    
    
73.   \{    
    
74.    string: navigator.userAgent,    
    
75.    subString: "MSIE",    
    
76.    identity: "Explorer",    
    
77.    versionSearch: "MSIE"    
    
78.   \},    
    
79.   \{    
    
80.    string: navigator.userAgent,    
    
81.    subString: "Gecko",    
    
82.    identity: "Mozilla",    
    
83.    versionSearch: "rv"    
    
84.   \},    
    
85.   \{   // for older Netscapes (4-)    
    
86.    string: navigator.userAgent,    
    
87.    subString: "Mozilla",    
    
88.    identity: "Netscape",    
    
89.    versionSearch: "Mozilla"    
    
90.   \}    
    
91. \],    
    
92. dataOS : \[    
    
93.   \{    
    
94.    string: navigator.platform,    
    
95.    subString: "Win",    
    
96.    identity: "Windows"    
    
97.   \},    
    
98.   \{    
    
99.    string: navigator.platform,    
    
100.    subString: "Mac",    
    
101.    identity: "Mac"    
    
102.   \},    
    
103.   \{    
    
104.    string: navigator.platform,    
    
105.    subString: "Linux",    
    
106.    identity: "Linux"    
    
107.   \}    
    
108. \]    
    
109.     
    
110. \};    
    
111. BrowserDetect.init();    
    
112.     
    
113. document.write('你正在使用的是：' + BrowserDetect.browser + ' ' + BrowserDetect.version + ' on ' + BrowserDetect.OS + '!');

复制代码

[Link 1]: http://www.html5cn.org/portal.php?mod=list&catid=20