JavaScript判断浏览器类型及版本

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

 

      浏览器对于我们来说，可能是最熟悉的工具了。记得最早那会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信息的实现

 

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

 

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

 

Mootools实现代码代码  收藏代码
  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. };   
  23. Browser.detect = function() {  
  24.     for (var engine in this.Engines){          
  25.         var version = this.Engines[engine]();          
  26.         // 如果具有特定的浏览器对象          
  27.         if (version){              
  28.             this.Engine = {name: engine, version: version};              
  29.             this.Engine[engine] = this.Engine[engine + version] = true;              
  30.             break;          
  31.         }      
  32.     }      
  33.     return {name: engine, version: version};  
  34. };   
  35. Browser.detect();  

 或者

Js代码  收藏代码
  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中有关浏览器检测的代码

 

Js代码  收藏代码
  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 + '!');  

 

posted @ 2014-07-09 09:48  super1234  阅读(542)  评论(0)  编辑  收藏  举报