JavaScript 浏览器检测方法。。。
2012-10-08 18:48
225 查看
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面对对象机制里面的工厂函数。不过写成了字面量的方式。
具体用到了一些正则的匹配。完整代码如下:
检测浏览器及其版本。主要用到了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)
相关文章推荐
- JavaScript检测浏览器cookie是否已经启动的方法
- Javascript 找一组数字中的最大数的方法(附使用Math.max来检测浏览器支持哪个属性)
- Javascript 找一组数字中的最大数的方法(附使用Math.max来检测浏览器支持哪个属性)
- javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
- javascript检测浏览器是否支持某些方法及属性
- javascript浏览器用户代理检测脚本实现方法
- JavaScript检测浏览器cookie是否已经启动的方法
- JavaScript检测并限制复选框选中个数的方法
- JavaScript编写检测用户所使用的浏览器的代码示例
- 认识Javascript中的navigator对象以及检测浏览器类型和版本,获取浏览器版本号,检测客户端操作系统
- console.log()不是JavaScript的一个方法,而是各浏览器提供的一个方法。
- Javascript iframe交互并兼容各种浏览器的解决方法
- JavaScript 浏览器检测
- javascript检测对象中是否存在某个属性判断方法小结
- Javascript可以兼容各浏览器的阻止默认行为发生的方法
- Javascript 浏览器检测
- jQuery javaScript js 判断浏览器的类型、版本的方法
- Javascript 判断浏览器是否为IE的最短方法
- 各种浏览器开启JavaScript脚本方法