JavaScript判断浏览器类型及版本

转载 2011年01月14日 18:23:00

 你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。

       几天前,浏览器家族有刚诞生了一位小王子,就是Google推出的Chrome浏览器。由于Chrome出生名门,尽管他还是个小家伙,没有人敢小看他。以后,咱们常说浏览器的“四大才子”就得改称为“五朵金花”了。

       在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子。浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。

       JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下,值判断出浏览器类型之后,还需判断浏览器版本才能处理兼容性问题,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道。

       我们先来分析一下各种浏览器的特征及其userAgent。

       IE

      只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数。只要判断window对象存在ActiveXObject函数,就可以明确判断出当前浏览器是IE。而IE各个版本典型的userAgent如下: 

        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

       Firefox中的DOM元素都有一个getBoxObjectFor函数,用来获取该DOM元素的位置和大小(IE对应的中是getBoundingClientRect函数)。这是Firefox独有的,判断它即可知道是当前浏览器是Firefox。Firefox几个版本的userAgent大致如下:

        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提供了专门的浏览器标志,就是window.opera属性。Opera典型的userAgent如下: 

        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

       Safari浏览器中有一个其他浏览器没有的openDatabase函数,可做为判断Safari的标志。Safari典型的userAgent如下:

 

        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

      Chrome有一个MessageEvent函数,但Firefox也有。不过,好在Chrome并没有Firefox的getBoxObjectFor函数,根据这个条件还是可以准确判断出Chrome浏览器的。目前,Chrome的userAgent是: 

        Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

      其中,版本号在Chrome只后的数字。

      有趣的是,Chrome的userAgent还包含了Safari的特征,也许这就是Chrome可以运行所有Apple浏览器应用的基础吧。

      只要了解了以上信息,我们就可以根基这些特征来判断浏览器类型及其版本了。我们会将判断的结果保存在Sys名字空间中,成为前端框架的基本标志信息,供今后的程序来读取。如果判断出谋种浏览器,Sys名字空间将有一个该浏览器名称的属性,其值为该浏览器的版本号。例如,如果判断出IE 7.0,则Sys.ie的值为7.0;如果判断出Firefox 3.0,则Sys.firefox的值为3.0。下面是判断浏览器的代码:


    <script type="text/javascript">
        
var Sys = {};
        
var ua = navigator.userAgent.toLowerCase();
        
if (window.ActiveXObject)
            Sys.ie 
= ua.match(/msie ([/d.]+)/)[1]
        
else if (document.getBoxObjectFor)
            Sys.firefox 
= ua.match(/firefox//([/d.]+)/)[1]
        else if (window.MessageEvent && !document.getBoxObjectFor)
            Sys.chrome 
= ua.match(/chrome//([/d.]+)/)[1]
        else if (window.opera)
            Sys.opera 
= ua.match(/opera.([/d.]+)/)[1]
        
else if (window.openDatabase)
            Sys.safari 
= ua.match(/version//([/d.]+)/)[1];
        
        
//以下进行测试
        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);

    </script>

 

      我们把对IE的判断放在第一,因为IE的用户最多,其次是判断Firefox。按使用者多少的顺序来判断浏览器类型,可以提高判断效率,少做无用功。之所以将Chrome放在第三判断,是因为我们预测Chrome很快会成为市场占有率第三的浏览器。其中,在分析浏览器版本时,用到了正则表达式来析取其中的版本信息。

      如果你的JavaScript玩得很高,你还可以将前面的判断代码写成这样:

 

    <script type="text/javascript">
        
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);
    
</script>

 

      这样可以使JavaScript代码更精简些。当然,可读性稍差一些,就看你是重视效率还是重视可维护性了。

      使用不同特征来判断浏览器的方法,虽然在速度上比用正则表达式分析userAgent要来的快,不过这些特征可能会随浏览器版本而变化。比如,一种浏览器本来独有的特性取得了市场上的成功,其他浏览器也就可能跟着加入该特性,从而使该浏览器的独有特征消失,导致我们的判断失败。因此,相对比较保险的做法是通过解析userAgent中的特征来判断浏览器类型。何况,反正判断版本信息也需要解析浏览器的userAgent的。

      通过分析各类浏览器的userAgent信息,不难得出分辨各类浏览器及其版本的正则表达式。而且,对浏览器类型的判断和版本的判断完全可以合为一体地进行。于是,我们可以写出下面的代码:


    <script type="text/javascript">
        
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);
    
</script>

 

      其中,采用了“... ? ... : ...”这样的判断表达式来精简代码。判断条件是一条赋值语句,既完成正则表达式的匹配及结果复制,又直接作为条件判断。而随后的版本信息只需从前面的匹配结果中提取即可,这是非常高效的代码。

       以上的代码都是为了打造前端框架所做的预研,并在五大浏览器上测试通过。今后,判断某种浏览器只需用if(Sys.ie)或if(Sys.firefox)等形式,而判断浏览器版本只需用if(Sys.ie == '8.0')或if(Sys.firefox == '3.0')等形式,表达起来还是非常优雅的。

      前端框架项目已经启动,一切就看过程和结果了...

 

原创:李战(leadzen) 阿里软件 2008-9-6 杭州
原文:http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html

相关文章推荐

JavaScript判断浏览器类型及版本

原文链接:http://www.cnblogs.com/lhb25/archive/2009/04/18/1438485.html 你知道世界上有多少种浏览器吗?除了我们熟知的IE, F...

JavaScript判断浏览器类型及版本(整理)

你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。        几天前,浏览器家族有刚诞生了一位小王子,就是Go...

javascript判断浏览器类型与版本

要想写出跨浏览器的javascript,就必须懂得嗅探技术。这是浏览器大战遗留下的大地雷,事已如此,只好认命,乖乖写分支结构吧,函数就是这样不知不觉中变长的。先看单一浏览器的判断,我们没有必须去找na...

JavaScript判断浏览器类型及版本

前段时间把jQuery升级到1.11.x后,发现$.browser已经废除,浏览器类型判断对系统前台页面非常重要,于是在网上搜罗了一些浏览器类型及版本的判断方法。...

JavaScript判断浏览器类型及版本

你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。        几天前,浏览器家族有刚诞生了一位小王子,就是G...

JavaScript判断浏览器类型及版本

你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。        几天前,浏览器家族有刚诞生了一位小王子,就...

JavaScript判断浏览器类型及版本

      你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。       几天前,浏览器家族有刚诞生了一位小王子...

javaScript判断浏览器类型和版本

你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。        几天前,浏览器家族有刚诞生了一位小王子,就...

JavaScript判断浏览器类型及版本

 你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。       几天前,浏览器家族有刚诞生了一位小王子,就是Go...

JavaScript判断浏览器类型及版本

你知道世界上有多少种浏览器吗?除了我们熟知的IE, Firefox, Opera, Safari四大浏览器之外,世界上还有近百种浏览器。        几天前,浏览器家族有刚诞生了一位小王子,就...
  • isea533
  • isea533
  • 2012年05月30日 15:07
  • 1134
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript判断浏览器类型及版本
举报原因:
原因补充:

(最多只允许输入30个字)