码迷，mamicode.com
首页 > 编程语言 > 详细

JavaScript判断浏览器类型及版本

时间：2014-07-11 23:50:09      阅读：588      评论：0      收藏：0      [点我收藏+]

标签：blog   http   java   使用   os   width   

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

 

      浏览器对于我们来说，可能是最熟悉的工具了。记得最早那会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代码  bubuko.com,布布扣
  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实现代码代码  bubuko.com,布布扣
  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代码  bubuko.com,布布扣
  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代码  bubuko.com,布布扣
  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 + ‘!‘);  

 

JavaScript判断浏览器类型及版本,布布扣,bubuko.com

JavaScript判断浏览器类型及版本

标签：blog   http   java   使用   os   width   

原文地址：http://www.cnblogs.com/xiaochao12345/p/3831361.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！