JavaScript 判断浏览器类型及版本


Posted in Javascript onFebruary 21, 2009

几天前,浏览器家族有刚诞生了一位小王子,就是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 杭州

为了让大家更尽兴三水点靠木小编特多整理几个:

<script language="JavaScript"> 
function getOs() 
{ 
  var OsObject = ""; 
  if(navigator.userAgent.indexOf("MSIE")>0) { 
    return "MSIE"; //ie浏览器
  } 
  if(isChrome=navigator.userAgent.indexOf("Chrome")>0){ 
    return "chrome"; //Chrome浏览器
  } 
  if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
    return "Firefox"; //Firefox浏览器
  } 
  if(isOpera=navigator.userAgent.indexOf("Opera")>0) { 
    return "Opera"; //Opera浏览器
  } 
  if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
    return "Safari"; //Safari浏览器
  }  
  if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
    return "Camino"; //Camino浏览器
//……增加一些其它代码……
  } 
  if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 
    return "Gecko"; 
  } 
} 
alert(navigator.userAgent);
 alert("您的浏览器类型为:"+getOs()); 
</script>

比较全的判断代码

<script type="text/javascript"> 
document.write('浏览器判?e:');
var OsObject=navigator.userAgent;
// 包含「Opera」文字列 
if(OsObject.indexOf("Opera") != -1) 
{ 
   document.write('您的浏览器是Opera吧?'); 
} 
// 包含「MSIE」文字列 
else if(OsObject.indexOf("MSIE") != -1) 
{ 
   document.write('您的浏览器是Internet Explorer吧?'); 
} 
// 包含「chrome」文字列 ,不过360浏览器也照抄chrome的UA

else if(OsObject.indexOf("Chrome") != -1) 
{ 
  document.write('您的浏览器是chrome或360浏览器吧?'); 
}
// 包含「UCBrowser」文字列 
else if(OsObject.indexOf("UCBrowser") != -1) 
{ 
  document.write('您的浏览器是UCBrowser吧?'); 
}
// 包含「BIDUBrowser」文字列 
else if(OsObject.indexOf("BIDUBrowser") != -1) 
{ 
  document.write('您的浏览器是百度浏览器吧?'); 
}
// 包含「Firefox」文字列 
else if(OsObject.indexOf("Firefox") != -1) 
{ 
  document.write('您的浏览器是Firefox吧?'); 
}
// 包含「Netscape」文字列 
else if(OsObject.indexOf("Netscape") != -1)
{ 
  document.write('您的浏览器是Netscape吧?'); 
} 
// 包含「Safari」文字列 
else if(OsObject.indexOf("Safari") != -1) 
{ 
   document.write('您的浏览器是Safari 吧?'); 
} 
else{ 
  document.write('无法识别的浏览器。'); 
} 
</script>
Javascript 相关文章推荐
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
javascript中Object使用详解
Jan 26 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
小程序实现五星点评效果
Nov 03 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
JavaScript 调试器简介
Feb 21 #Javascript
用jQuery简化JavaScript开发分析
Feb 19 #Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 #Javascript
javascript function、指针及内置对象
Feb 19 #Javascript
csdn 批量接受好友邀请
Feb 19 #Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 #Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 #Javascript
You might like
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php中session定期自动清理的方法
2015/11/12 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Django中几种重定向方法
2015/04/28 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
python使用matplotlib画饼状图
2018/09/25 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Python实现多属性排序的方法
2018/12/05 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
档案管理员岗位职责
2013/12/01 职场文书
感谢信怎么写
2015/01/21 职场文书
社区活动总结
2015/02/04 职场文书
节约用电倡议书
2015/04/28 职场文书
老干部座谈会主持词
2015/07/03 职场文书
信息技术国培研修日志
2015/11/13 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
python标准库ElementTree处理xml
2022/05/20 Python