<script language="JavaScript"> <!-- function getOs() { var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari"; } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return "Camino"; } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko"; } }alert("您的浏览器类型为:"+getOs()); --> </script>

if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP");

}

posted

现在的浏览器可真是越来越多，但兼容性可真是不敢恭维，这个脚本可根据浏览器来自动进行导航，在特定场合是非常有用的，你好好看看吧！！！

<SCRIPT language="JavaScript"> <!-- function browserSniffer(netscape4URL,explorer4URL,webtvURL, aolURL,operaURL,version3URL,w3cURL) { var agt=navigator.userAgent.toLowerCase(); var agt=navigator.userAgent.toLowerCase(); var is_major = parseInt(navigator.appVersion); var is_minor = parseFloat(navigator.appVersion); var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1) && (agt.indexOf('webtv')==-1)); var is_nav2 = (is_nav && (is_major == 2)); var is_nav3 = (is_nav && (is_major == 3)); var is_nav4 = (is_nav && (is_major == 4)); var is_nav4up = (is_nav && (is_major >= 4)); var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) || (agt.indexOf("; nav") != -1)) ); var is_nav5 = (is_nav && (is_major == 5)); var is_nav5up = (is_nav && (is_major >= 5)); var is_ie = (agt.indexOf("msie") != -1); var is_ie3 = (is_ie && (is_major < 4)); var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")==-1) ); var is_ie4up = (is_ie && (is_major >= 4)); var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) ); var is_ie5up = (is_ie && !is_ie3 && !is_ie4); var is_aol = (agt.indexOf("aol") != -1); var is_aol3 = (is_aol && is_ie3); var is_aol4 = (is_aol && is_ie4); var is_opera = (agt.indexOf("opera") != -1); var is_webtv = (agt.indexOf("webtv") != -1);
if (is_nav4up) { location.href = netscape4URL; // netscape 4+ but not NS5 }else if (is_ie4up) { //IE4 & IE5 but returns IE4 location.href = explorer4URL; }else if (is_webtv) { // Web TV location.href = webtvURL; }else if (is_aol || is_aol3 || is_aol4) { //AOL location.href = aolURL; }else if (is_opera) { // Opera location.href = operaURL; }else if (is_ie3||is_nav3) { // 3.0 version browsers location.href = version3URL; }else if (is_nav5up) { // Netscape 5 location.href = w3cURL; } } //--> </SCRIPT> <BODY onLoad="browserSniffer('nn4.html','IE4.html','webtv.html', 'aol.html','opera.html','NNandIE3.html','nn6.html')">

在网站前端开发中，浏览器兼容性问题本已让我们手忙脚乱，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')等形式，表达起来还是非常优雅的。

判断浏览器类型-----------navigator.userAgent.indexOf()的更多相关文章

  1. navigator.userAgent.indexOf来判断浏览器类型

    navigator.userAgent.indexOf来判断浏览器类型 (2011-03-03 11:30:40) 转载▼ 标签: 杂谈   来源:http://xtaai5233.blog.163. ...

  2. 使用window.navigator.userAgent属性判断浏览器类型及版本

    使用window.navigator.userAgent属性判断浏览器类型及版本 2011-12-11 22:03:11 window.navigator.userAgent属性包含了浏览器类型.版本 ...

  3. 通过navigator.userAgent判断浏览器类型

    1.navigator.userAgent返回一个浏览器信息字符串. 2.用到indexOf()方法,查找字符串中是否有指定的浏览器类型. 3. if(navigator.userAgent.inde ...

  4. js判断浏览器类型以及浏览器版本

    判断浏览器类型:   if navigator.userAgent.indexOf(”MSIE”)>0) {} //判断是否IE浏览器 if(isFirefox=navigator.userAg ...

  5. （转）JavaScript判断浏览器类型及版本

    IE 只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数.只要判断window对象存在ActiveXObject函数,就可以明确判断出当前浏览器是 ...

  6. 使用javascript判断浏览器类型

    之前在项目中遇到过要针对不同浏览器做不同的一些js或者css操作,后来某个朋友也突然问到这个问题,所以,整理了一下,在这里留个笔记,方便以后使用. 使用javascript判断浏览器类型: funct ...

  7. JS判断浏览器类型与版本

    在JS中判断浏览器的类型,估计是每个编辑过页面的开发人员都遇到过的问题.在众多的浏览器产品中,IE.Firefox.Opera.Safari........众多品牌却标准不一,因此时常需要根据不同的浏 ...

  8. PC端判断浏览器类型及移动端判断移动设备类型

    浏览器代理检测,可以检测出来用户使用的浏览器类型,也可以检测浏览器所在的操作系统 navigator.userAgent (1).判断浏览器类型 var t = navigator.userAgent ...

  9. js判断浏览器类型和版本

    原网址:http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html 除了另无它法,肯定不使用navigator.userAgen ...

随机推荐

  1. Laravel Homestead安装教程

    1/先在https://www.vagrantup.com  下载vagrantup ,对应平台下载,并安装,安装后可以在命令行使用vagrant https://www.vagrantup.com/ ...

  2. 免信用卡注册美国App Store账号

    对于一些应用国内的App Store无法下载让人很郁闷,而自己又有点轻微的强迫症.于是开始尝试免信用卡注册iCloud账号. Apple的官方网站上的教程,见http://support.apple. ...

  3. 外部表查询时出现ORA-29913和ORA-29400错误

    create table t_ext_tab(id char(1),name char(6)) organization external( type oracle_loader default di ...

  4. couldnt resolve host mirrorlist.centos

     解决centos 6.3 yum安装软件时找不到镜像问题 [root@nagios-server ~]# yum update –y Loaded plugins: fastestmirror Lo ...

  5. class_create(),device_create自动创建设备文件结点

    class_create(),device_create自动创建设备文件结点 从linux 内核2.6的某个版本之后,devfs不复存在,udev成为devfs的替代.相比devfs,udev有很多优 ...

  6. touches获得手指点击的坐标

    -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObjec ...

  7. owa Your request can't be completed right now. Please try again later.

    Your request can't be completed right now. Please try again later.

  8. linux grep、find 命令详解

    grep1.作用grep命令可以指定文件中搜索特定的内容,并将含有这些内容的行标准输出.grep全称是Global Regular Expression Print,表示全局正则表达式版本,它的使用权 ...

  9. Asp.Net MVC结合ExtJs gridPanel 分页和高度自适应

    Ext.onReady(function () { gridPanel(); var panel = Ext.getCmp('gridPanel'); window.onresize = functi ...

  10. GitHub 有哪些优秀的项目

    GitHub 有哪些优秀的项目 http://www.zhihu.com/question/20584141