JavaScript判断浏览器类型及版本

#wiki

   你知道世界上有多少种浏览器吗？除了我们熟知的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')等形式，表达起来还是非常优雅的。

评论

发表评论

此博客中的热门博文

教您如何认识植柔皮，头层皮革，修面皮革，油蜡皮、水染皮、摔纹皮、纳帕皮、打蜡皮、压花皮、修面皮、漆光皮、磨砂皮、贴膜皮

#wiki 植柔皮：皮质的术语。   从皮革的档次来分：全粒面皮>半粒面皮>轻修面皮>重修面皮   从皮革的软硬来分：铬鞣皮>半植鞣皮>全植鞣皮(烤皮)   从皮革的风格做法来分：油蜡皮、水染皮、摔纹皮、纳帕皮、打蜡皮、压花皮、修面皮、漆光皮、磨砂皮、贴膜皮、印花皮、裂纹皮、反绒皮等。 真皮：真皮又有头层皮和二层皮区分。 头层皮是指带有粒面（真皮层）的牛、羊、猪皮等，皮面有自然特殊的纹路效果。二层皮没有真皮层，是纤维组织（网状层），经化学材料喷涂或覆上 PVC 、 PU 薄膜加工而成,因此，区分头层皮和二层皮的有效方法，是观察皮的纵切面纤维密度。头层皮由又密又薄的真皮层及与其紧密连在一起的稍疏松的网状层共同组成，具有良好的强度、弹性和工艺可塑性等特点。 再生皮：国外又名皮糠纸。将各种动物的费皮及真皮下脚料粉碎后，调配化工原料加工制作而成。其表面加工工艺同真皮的修面皮、压花皮一样，其特点是皮张边缘较整齐、利用率高、价格便宜；但皮身一般较厚，强度较差，只适宜制作平价公文箱、拉杆袋、球杆套等定型工艺产品和平价皮带，其纵切面纤维组织均匀一致，可辨认出流质物混合纤维的凝固效果。 人造革：也叫仿皮或胶料，是PVC和 PU 等人造材料的总称。它是在纺织布基或无纺布基上，由各种不同配方的 PVC 和 PU 等发泡或覆膜加工制作而成，可以根据不同强度、耐磨度、耐寒度和色彩、光泽、花纹图案等要求加工制成，具有花色品种繁多、防水性能好、边幅整齐、利用率高和价格相对真皮便宜的特点，但绝大部分的人造革，其手感和弹性无法达到真皮的效果；它的纵切面，可看到细微的气泡孔、布基或表层的薄膜和干干巴巴的人造纤维。 购买皮货防骗绝招，消费者须知 一 认准皮层：好多商家都理直气壮的对您承诺：“不是真皮的皮货，假一赔十”。这句话确实是真的，因为确实是真皮的，但不是头层皮的，所以他不敢说：“不是头层真皮的皮货，假一赔十”。因为市场上为了竞争，90%是二层皮，因为头层皮原料价格要贵的多，利润空间太小，所以利益驱使，都卖二层皮皮货。      小知识：一张原皮，可以剖若干层来用，不过，高贵、美观、耐用只属于头层皮，其它层皮无法比拟。国外市场高价大量收购头层...
阅读全文

时间管理：每天挤出一小时

一位名叫富兰克林·费尔德的人曾精辟地说过这么一句话：成功与失败的分水岭可以用这么五个字表达——‘我没有时间’。 在当今这个生活节奏紧凑的年代里，人们似乎每天都没有充余的时间去做完想做的事，所以许多念头就此打消了。但世界上仍有许多人用坚持每天至少挤出一小时的时间发展自己的个人爱好。事实上我注意到，往往越是忙碌的人，他越能挤出这一小时。 当今世界上最大的化学公司——杜邦公司的总裁格劳福特·格林瓦特，每天挤出一小时研究蜂鸟（一种世界上最小的鸟），用专门的设备给蜂鸟拍照。权威人士把他写的关于蜂鸟的书称为自然历史丛书中的杰出作品。 休格·布莱克进入美国议会前，并未受过高等教育。他从百忙中每天挤出一小时到国会图书馆去博览群书，包括政治、历史、哲学、诗歌等方面的书，数年如一日，就是在议会工作最忙的日子里也从未间断过。后他成了美国最高法院的法官，这时他已是最高法院中知识极为渊博的人士之一。 我承认，要挤出这一小时并不容易，需要有决心和恒心。关键在于如何设法得到这一个小时，并且有效地利用它。 每个人的头脑都有能力去创造和想象，关键在于为自己寻找到机会。一位名叫尼古拉的希腊籍电梯维修工对现代科学很感兴趣，他每天下班后到晚饭前，总要花一小时攻读核物理学方面的书籍。随着知识的积累增多，一个念头跃入他脑海。1948年他提出了建立一种新型粒子加速器的计划。这种加速器比当时其它类型的加速器造价便宜而且更强有力。他把计划递交给美国原子能委员会作试验，又再经改进，这台加速器为美国节省了7000万美元。尼古拉得到了1万美元的奖励，还被聘请到加州大学放射实验室工作。 富兰克林·罗斯福在战争最艰苦的年代里，时常强迫自己挤出一小时集邮，借以摆脱周围的一切。已故的吉妮太太曾告诉我，总统那时经常去她管的那幢房子，把自己关在里面，摆弄着各色邮票。总统的时候脸色阴沉，心情忧郁，疲惫不堪。等到他走出屋子离去时，精神状态完全变了，变好了，似乎整个世界都变得明亮了。 要得到这样的收益，无论多大年纪的人都可以马上做起。我认识一位老人，他从78岁起每天抽出一小时学习欣赏音乐。他说：我很快就养成了这种习惯，每天听一小时的音乐。我要掌握欣赏音乐的能力，随着年岁增高，等到我不得不靠静坐度日时，就用得上它了。 一天安排出一小时静心，排除疲劳，即使看没有做出多大的事情，但我深信大多数人还是会觉得有收益的。至少他们在这段时间里可以理清头...
阅读全文

你的妈妈已经等了二十几年

那天是周末，早就说好了要和朋友们去逛夜市，母亲却在下班时打来电话："明天我们公司去踏青，你下班时帮我到面包店买一袋椰蓉面包，我带着中午吃。" "踏青？"我发吃一惊，"啊，你们还去踏青？"想都不想，我一口回绝："妈，我跟朋友约好了要出去，我没时间。"跟母亲讨价还价了半天。她一直说："只是买一袋面包，快得很，不会耽误你……"最后她都有点生气了，我才不情愿地答应下来。 一心想着速战速决，刚下班我就飞奔前往，但是到了面包店一看竟是人山人海。想起朋友们肯定都在等我，我更是急得跺脚。真不知道母亲是怎么想的，周末不在家休息，还要去春游？春游，根本就是小孩子的事情嘛！ 售货员统计了每个人买的数量，算起来我是第三炉的最后一个。这时，背后有人轻轻叫一声："小姐。"我转过头去，是个不认识的中年妇人，我问："怎么了？"她说："小姐，我们打个商量好吗？你看，我只在你后面一个人，就得再等一炉。我这是给儿子买，他明天远足，我一会儿还得做饭送他去补习班。如果你不急的话，我想，嗯……" "请问你是帮谁买？"她轻声问。"给我妈买，她明天也要踏青。"当回答完时，我发现整个店突然有一种奇异的寂静，所有的眼光同时投向我。"哇，今天卖了好几百袋，你可是第一个买给妈妈的。"售货小姐笑着说。我一惊，环顾四周才发现，队伍里几乎全是女人，从白发苍苍到绮年少妇，每个人的大包小包，都注解着她们主妇和母亲的身份。 "那你们呢？""当然是给我们小皇帝的。"不知是谁接了口，大家都笑了。我身后那位妇女连声说："对不起！我真没想到，这家店人这么多，你都肯等。我本来都不想来的，是儿子一定要，我也希望让他吃好、玩好。我们小时候远足，还不就是想着要吃零食？" 她脸上忽然浮现出神往的表情，我问："您现在还记得小时候远足的事啊？"她笑了："怎么不记得？现在也想去啊，哪怕只在草坪上坐一坐晒晒太阳也好！可是总没时间。" 她轻轻叹口气，"大概，我之后等孩子长到你这么大的时候，才有机会吧！"原来是这样，踏青并...
阅读全文