软件真谛

用水云般自在的禅心，书写诗情画意的程序人生...
posts - 28, comments - 1195, trackbacks - 33, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 ::  :: 管理

JavaScript判断浏览器类型及版本

Posted on 2008-09-06 23:14 李战 阅读(17461) 评论(31)  编辑 收藏 网摘 所属分类: 前端开发

      你知道世界上有多少种浏览器吗？除了我们熟知的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
转载务必注明作者及出处

 

Feedback

#1楼[楼主]   回复  引用  查看    

2008-09-06 23:16 by 李战      
http://www.cnblogs.com/Emoticons/qface/055243485.gif" alt="" />也请各位大侠们帮俺测试一下里面的代码。先谢过！

#2楼   回复  引用  查看    

2008-09-06 23:22 by 熊呜呜      
基本上只用判断IE就可以了。。

其他浏览器大概应该不出意外的话，会遵循W3C的标准的。

#3楼   回复  引用    

2008-09-06 23:22 by zzzz[未注册用户]
混到阿里去了吗

#4楼   回复  引用  查看    

2008-09-06 23:46 by Jillean Wong      
据我所知，chrome用的是safari的内核。另外，《Javascript高级程序设计》这本书已经把浏览器检测的方法的很详细了，而且你的方法和前者可以说完全一样。

#5楼   回复  引用    

2008-09-07 01:08 by w3c==garbage[未注册用户]
这种判断浏览器的方法其实并不好
比较推荐的是判断功能 比如 if(window.XMLHttpRequest)
这种判断只在某些极端的情况下出现 比如处理内存泄露

#6楼   回复  引用  查看    

2008-09-07 01:19 by Q.Lee.lulu      
拜读！！

#7楼   回复  引用    

2008-09-07 02:25 by alex1[未注册用户]
5楼说得对 现在兼容性问题的浏览器判断一般是基于功能（Feature-Based），判断内核（Trident, Gecko, Webkit, Opera），safari和chrome都是webkit内核。

lz可以看看mootools源码中浏览器判断的部分，写得非常简短

p.s chrome的名字和图标让我感觉像是强殖装甲的感觉，不知道是不是粉丝之作

#8楼[楼主]   回复  引用  查看    

2008-09-07 07:30 by 李战      
@熊呜呜
不能只管IE的。如果告诉人家：“咱们的前端框架只支持IE”，俺就会找地方躲起来。

@Jillean Wong
您说得很对，俺一定去买一本《JavaScript高级程序设计》来拜读。俺只是想要一个既简洁，又好用的代码，特别是好用。


@w3c==garbage
if(window.XMLHttpRequest) 不行吧，目前绝大多数浏览器都有这个功能。可能俺没有明白您的意思。

@alex1
非常感谢您的指点，豁然开朗啊，哈哈。
判断特有功能是比较快，但浏览器的功能又互相在学习啊。
关于判断内核的问题，俺们也考虑过，后来觉得判断浏览器类型应该能为编程者提供更多的信息。当然，也不排除两者都判断。目前这些代码还未定型的，只是预研。
俺们一直在研究jquery, prototype, mootools, yui, ext等等框架，希望每一项功能都是他们的精华部分。因为，俺们的前端框架要承载自身的特殊业务，不能照搬照抄现有框架。
mootools里基于浏览器特征来判断浏览器的方式有其特点，感觉硬了点，而且不支持chrome。当然，其他框架也都还不支持chrome的判断，或者将其当成safari。这对于统计浏览器类型的应用来说，是不够的。
mootools的那段判断大约用了五百多个字符的代码，我们的只用了三百多个字符。
mootools中判断firefox 3.0需要用
if(Browser.Engine.name=='gecko' && Browser.Engine.version == 19)
而我们希望只用
if(Sys.firefox == 3.0)
当然，我们还在尝试和设计，最后是啥形式，没准的。

#9楼   回复  引用  查看    

2008-09-07 07:58 by brightwang      
判断浏览器类型现在的javascript的开发潮流是不推荐的，大部分情况下基于功能的检测才是应该推荐的方法，行为分离、平稳退化、功能检测是javascript的最佳实践，谁也不能保证浏览器会进行伪装，这个在浏览器大战的时代是频繁发生的，而且浏览器的版本会越来越多，以后ie、ff到9.0、10.0然道也要一一的检测，以后ie也会像w3c不断看齐，那么功能检测时只要先检测是否实现W3C标准的对象，就可以正确使用符合标准的对象。

#10楼   回复  引用  查看    

2008-09-07 10:20 by Justin      
@brightwang
赞同

#11楼   回复  引用  查看    

2008-09-07 11:16 by JerryChou      
mootools判断浏览器类型一般用下面这种更简洁的方法：
判断是否基于gecko：
if (Browser.Engine.gecko)

判断是否基于gecko，且版本为19：
if (Browser.Engine.gecko19)

用过prototy，jquery，mootools，ext，还是觉得mootools最好。

#12楼   回复  引用  查看    

2008-09-07 11:26 by 簡簡單單..      
觉得Sys对象应加上可以标识浏览器内核名称及内核版本的属性(http://www.cnblogs.com/yuyadong/archive/2008/09/07/1286196.html">浏览器内核)..
其中判断Firefox建议使用: if (window.XMLHttpRequest) { }
期待完善..

#13楼   回复  引用    

2008-09-07 11:33 by w3c==garbage[未注册用户]
@李战
嗯 我的意思是 不要判断浏览器的类型 只判断浏览器的功能
比如 我想new XMLHttpRequest()

我不会这样判断
if(isIE7||isIE8||isFF||isOpera)
var request=new XMLHttpRequest();

而是这样
if(window.XMLHttpRequest)
var request=new XMLHttpRequest();

#14楼   回复  引用    

2008-09-07 11:37 by w3c==garbage[未注册用户]
@李战
浏览器类型判断仅仅在非常极端的情况下可能会用到
我所知仅有一种情况 就是正则表达式

#15楼   回复  引用    

2008-09-07 11:41 by w3c==garbage[未注册用户]
@alex1
chrome的壳子其实很一般 业余水准而已 不过他的JS引擎V8真的是非常优秀
顺便说一下现在IE的内核就叫mshtml（这名字是不是很土？）

#16楼   回复  引用  查看    

2008-09-07 19:43 by 坏人      
IE的内核不是第三方的么？怎么会是MSHTML？

虽然我对MS很有好感，但是chrome的壳还是不错的，挺漂亮，值得IE学习。

#17楼   回复  引用    

2008-09-07 20:53 by EOF[未注册用户]
何必呢??
如果FF不能正常显示，我立刻换IE，何必为用户考虑那么多呢，现在的用户不笨！

#18楼[楼主]   回复  引用  查看    

2008-09-08 08:32 by 李战      
@brightwang
谢谢大侠指点，您是这方面的专家了。
的确，基于功能检查还是基于userAgent信息检测，都是为了两个目的，一是解决兼容性问题，二是客户端信息统计。
如果纯粹为了第一个目的，基于功能检测会更适合些。如果两个目的都要考虑，恐怕基于userAgent信息检测就更适合些。
也许会有人修改userAgent等冒充其他浏览器，但这毕竟是极少数的。
至于检测是否符合W3C标准，可能还需要其他检测项目，比如document的compatMode属性值。
您的讲解让大家更加清楚地看清了问题，多谢！

@JerryChou
多谢，您对mootools太了解了，佩服佩服。
我们打算将版本号做成数值类型的，这样不但可以直接判断，还可以进行比较。而mootools的那种名称加版本号的形式，似乎有写死的嫌疑。哈哈

@簡簡單單..
@w3c==garbage
俺还是没明白二位的意思。因为XMLHttpRequest是大多数浏览器都有的功能，怎么能根据它判断出浏览器就是Firefox呢？

另外，我们也不赞同下面这种写法：
if(isIE7||isIE8||isFF||isOpera)
var request=new XMLHttpRequest();
也不赞同你的：
if(window.XMLHttpRequest)
var request=new XMLHttpRequest();

我们认为XMLHttpRequest函数应该在前端框架初始化完成之后就准备好的，后续代码只管new XMLHttpRequest()即可，无需处处判断。哈哈

多谢指点！

@EOF
我们目的：让用户使用自己喜欢的换浏览器！

#19楼   回复  引用  查看    

2008-09-08 10:24 by 黑羽飘舞      
这种东西貌似没必要放首页吧？？？

#20楼   回复  引用  查看    

2008-09-08 11:15 by 马可香蕉      
一个新方法，不错

#21楼   回复  引用    

2008-09-15 17:44 by srx[未注册用户]
请问,能否判断IE内核的浏览器,最近需要做这一功能

用serAgent属性只能判断外核的,如maxthon这些用IE内核的浏览器,就判断不出来,请问有办法吗?

#22楼   回复  引用  查看    

2008-09-17 23:36 by ※ABeen※      
好用的东

#23楼   回复  引用    

2008-10-17 16:42 by nianshi[未注册用户]
非常感谢啊

#24楼   回复  引用    

2008-10-21 17:53 by Burrows[未注册用户]
借个地方问一下，楼猪您的书什么时候上架啊？我钱攥在手里快半年了，湿透了~~等你等的花儿谢了又开了~~

#25楼   回复  引用    

2008-11-22 19:02 by johny[未注册用户]
谢谢，太感谢了！

#26楼   回复  引用    

2008-12-03 18:52 by 书虫[未注册用户]
楼主这个在ie8bate2里面判断的怎么是ie7啊??

#27楼   回复  引用    

2009-03-01 21:50 by 青青葵[未注册用户]
这个怎么样？根据楼主的改的

function getBrowser()
{
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var re =/(msie|firefox|chrome|opera|version).*?([\d.]+)/;
var m = ua.match(re);
Sys.browser = m[1].replace(/version/, "'safari");
Sys.ver = m[2];
return Sys;
}
var sys = getBrowser();
document.write(sys.browser + "===" + sys.ver);

#28楼   回复  引用    

2009-04-04 17:44 by 网友[未注册用户]
非常全面，谢了！
http://www.mofun.cc

#29楼   回复  引用    

2009-04-16 15:08 by slowsay[未注册用户]
谢谢，提供资料

#30楼   回复  引用    

2009-06-06 19:11 by 天意主页[未注册用户]
非常感谢，用上了！

http://www.ry168.net/music.htm

#31楼   回复  引用    

2009-06-24 09:24 by 徐刚辉[未注册用户]
收下
发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1285764




相关文章:

相关链接: