JavaScript 浏览器检测方法。。。

Js 的兼容性问题。估计是困扰前端的首要问题之一。js的兼容性，主要是指浏览器的兼容，不同的浏览器存在兼容问题，就连同一个浏览器的不同版本也存在兼容性。比如万恶的 IE 家族。


检测浏览器及其版本。主要用到了BOM对象的navigator的一个 userAgent属性。至于什么是BOM。可以从js的构成说起。


JavaScript 的前世今生


大家熟知的 JavaScript。据说诞生之初称为 C--。与C++正好相反的命名。主要目的是为了让客户端执行脚本，减轻表单提交时候的服务器验证压力。于是 Netscape（网景）公司开发了一种脚本，当时叫 LiveScipt。而网络刚兴起的年代， 最火的编程语言应该算是 Java了。SUN公司不遗余力的推广 Java applet。Netscape和 Sun 公司合作之后，为了借助 java 的推广营销策略，更名为 JavaScript。这个决定，也让至今都有很多人搞不清 javascript和 java之间的关系。js的创始人也曾在一个讲演中抱憾：Don't let marketing name your language.


随着web的发展，Microsoft（微软）公司也加入了竞争，并推出了自己的浏览器 Internet Explorer。并且很快就击败了如日中天的 Netscape 。微软也推出了类似js的客户端脚本语言 JScript。从此开启了 js 万恶的兼容时代。当然，后来也就出现了组织，用来标准化js。即ECMA （欧洲计算机制造协会）。现在的标准版本是 ECMA Script 5.


Browser的兼容性由来


尽管 ECMA 推出了标准。当时占据市场的微软并不合作，试图自定一套 微软的标准。因此 ie和 mozilla基金会下的 firefox，基于webkit的 Google chrome与 apple safari分道扬镳。不同是标准，浏览器的渲染不一样，导致了js的兼容性。而所谓的浏览器兼容主要就是BOM（browser object model）浏览器对象模型。大家都熟悉 DOM。DOM1 DOM2存在一些兼容性问题，而BOM其实不存在兼容性问题，因为根本就不兼容。


JavaScript 的构成


严格意义上来说，Javascript = ECMA + BOM + DOM。即标准协议（不是语言）加上 浏览器对象模型，以及文档对象模型。构成了 js 语言（平台）。


检测浏览器的具体方法


扯了这么多，进入正题。要想判断浏览器的类型和版本，就用到了 bom对象中的 navigator的userAgent属性。下面是不同浏览器打印的效果


chrome


Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.19 (KHTML, like Gecko)Chrome/18.0.1025.152


firefox


Mozilla/5.0 (Windows NT 6.1; WOW64; rv:15.0) Gecko/20100101 Firefox/15.0.1


safari


Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko)Version/5.1.2 Safari/534.52.7


opera


Opera/9.80 (Windows NT 6.1; WOW64; U; Edition IBIS; zh-cn) Presto/2.10.229 Version/11.62


IE 9


Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Win64; x64; Trident/5.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; Tablet PC 2.0; .NET4.0C; .NET4.0E)


从userAgent的字符串中，可以看到，不同的浏览器都有 浏览器名称 版本和渲染引擎比如加粗的字体，通常有几大引擎 Webkit（chrome，safari） Gecko（firefox）Trident（IE）Presto（opera）KHTML等。


其中，opera 和 ie 的低版本，并不包含 渲染引擎。而实际操作中处理兼容性，对于渲染引擎也不用关心其具体版本。因此在处理引擎的时候，就把浏览器版本号给引擎版本。虽然是不对的，姑且就那样吧。

代码比较简单，创建一个对象（类），用来保存浏览器的 名称，版本等属性。返回这个对象。这里用到了 JavaScript面对对象机制里面的工厂函数。不过写成了字面量的方式。

var client = function(){    var engine = {        //引擎属性    }    var broswer = {        //浏览器属性    }    //返回对象    return [engine:engine,browser:browser]}()

具体用到了一些正则的匹配。完整代码如下：

document.write(navigator.userAgent);                        var client = function(){    //引擎    var engine =     {        trident:false,        gecko:false,        webkit:false,        khtml:false,        presto:false,        version:0    }    //浏览器    var browser =     {        ie:false,        firefox:false,        chrome:false,        safari:false,        opera:false,                            version:0,        name:''    }                                    //核心检测    var ua = navigator.userAgent                            if(window.opera)                                //opera    {        engine.presto = browser.opera = true;        engine.version = window.opera.version();        browser.name = 'Opera';        browser.version = window.opera.version();    }    else if (/AppleWebKit\/(\S+)/.test(ua))         //检测 webkit引擎       {        engine.webkit = true;        engine.version = RegExp['$1'];                            if (/Chrome\/(\S+)/.test(ua))               //chrome        {            browser.chrome = true;            browser.version = RegExp['$1'];            browser.name = 'Chrome';        }        else if (/Version\/(\S+)/.test(ua))         //safari        {            browser.safari = true;            browser.version = RegExp['$1'];            browser.name = 'Safari';        }    }    else if(/rv\:(\S+)\) Gecko\/\d{8}/.test(ua))    //检测 Gecko引擎     {        engine.gecko = true;        engine.version = RegExp['$1'];                            if (/Firefox\/(\S+)/.test(ua))        {            browser.firefox = true;            browser.version = RegExp['$1'];            browser.name = 'FireFox';        }    }    else if(/MSIE\s(\S+)\;/.test(ua))               //检测 Trident IE系列    {        engine.trident = browser.ie = true;        engine.version = RegExp['$1'];        browser.name = 'IE';        browser.version = RegExp['$1'];    }                                    return {        engine:engine,        browser:browser    };}()            //调用alert(client.browser.name + client.browser.version)