js判定赏识器范例,版本,附多个实例代码

你知道天下上有几多种赏识器吗？除了我们熟知的IE, Firefox, Opera, Safari四大赏识器之外，天下上尚有近百种赏识器。

在网站前端开拓中，赏识器兼容性题目本已让我们惊慌失措，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> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

我们把对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; //以下举办测试 liehuo.net 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代码更精简些。虽然，可读性稍差一些，就看你是重视服从照旧重视可维护性了。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!