如何检测现在主流的几大浏览器？

          在客户端中，浏览器最重要的检测对象是navigator对象，包括检测浏览器的名称，版本号和平台等。

一：检测浏览器有哪些方式？

         目前主要有两种方式：user-Agent字符串检测法和对象/特征检测法。

         对象/特征检测法：主要是检测浏览器具有哪些能力，而不是特定的浏览器的版本号，名称。比如：判断浏览器是否支持DOM，则可以使用该检测方法。

if(document.getElementById)
{
   alert("支持DOM")；
}
else
{
   alert("不支持DOM");
}

         注意：如果检查函数是否存在，不能加入括号，因为如果加入括号，浏览器就会尝试调用该函数，如果该函数不存在，则会出现错误。

        比如下面的列子：

if(test)-----test为函数名
{
   console.log("111");
}
else
{
   console.log("222");
}

      user-Agent字符串检测法：提供关于WEB浏览器的大量信息，包括版本号和名称等，应用比较广泛，像在网站流量统计，网站中访客使用的浏览器和操作系统等应用的比较多。

var suserAgent=navigator.userAgent;  //我使用的是FIREFOX,输出为：Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0
var suserVersion=navigator.appVersion  //输出为5.0

二：user-Agent（用户代理）的格式

       navigator对象最早始于netScape Navigator 2.0和IE3.0；NetScape 引擎开发的代号为Mozilla.

       IE和NetScape的格式  

      1.netScape Navigator 3.0

        格式为：Mozilla/AppVersion(platform,Secrity[;os-or-cpu-description])

        比如win95在netScape Navigator 3.0 上运行后为：Mozilla/3.0（win95;I）

        I表示安全性较低，N表示没有安全性，U表示强128位加密安全性。

     2.IE3.0 

        格式为：Mozilla/2.0(compatible,MSIE [IEversion];os)--compatible表示兼容的。

        IE是3.0,而后面Mozilla/2.0有坑，造成user-Agent混淆

        比如win95在IE3.02运行后为：Mozilla/2.0（compatible;MSIE 3.0;windows 95）

 

   //因此混淆带来的影响是：检测浏览器IE3.0和操作系统的算法变得更加繁琐。
   检测IE变为：
    if(navigator.userAgent.indexOf('MSIE ')>-1)
    {
         //检测为3.0或更高版本
         if(navigator.userAgent.indexOf('3.')>-1){alert("检测IE3.0版本浏览器")}
    }
    else if(parseFloat(navigator.appVersion)>=3)
    {
         alert("检测非IE3.0版本的浏览器")
    }
   //如果没有混淆，只用一个算法，便能检测3.0版本的浏览器
    if(parseFloat(navigator.appVersion)>=3)
    {
         alert("检测到所有为3.0版本的浏览器")
    }

         因此如果Mozilla和IE的版本不对应，都要单独检测IE。其它的这里都不再讲述了，大家知道就行。

       3：现在基本两者都保持一致。

        格式为：Mozilla/MozillaVersion(platform,security,os-or-cpu;localization information;prereleaseVersion) Gecko/Geckoversion   ApplicationProduct/ApplicationProductVersion

        下面一一解释各个的含义：

         MozillaVersion--MozillaVersion的版本

         platform-----------操作系统类型，包括WINdows,Mac,Unix

         security-----------可为I N U

         os-or-cpu---------windows系统下：winNT/win95 ;Mac系统下：代表cpu类型，为68k/ppc  ;Unix系统下：从uname-sm中获得

         localization information-------浏览器使用的语言，典型的为美国的en-US

         prereleaseVersion--------用于这个浏览器的开放源代码的Mozilla代码的基础版本。

         Geckoversion   ----使用Gecko渲染引擎的版本，这里按照yyyymmdd的日期

         ApplicationProduct---------使用Mozilla代码的品牌浏览器的名称。

         ApplicationProductVersion-----使用Mozilla代码的品牌浏览器的名称的版本。

         比如：Mozilla/5.0 (Windows ；u;Windows NT 6.1; en-US;rv:46.0) Gecko/20100101 Firefox/46.0 

        Opera的格式  

           格式：Opera/AppVersion(os,security)[language]

           比如：Opera/7.54(windows NT 5.1,u)[en]

          Opera用一个独特的user-Agent来表示确定它的web浏览器,但正是因为它的独特性，它可以伪装成IE和Mozilla的某种版本。

因此这就造成了需要针对出现的不同版本，判断属于何种浏览器。

       1.当opera伪装成Mozilla 5.0时，返回的user-Agent为：

         Mozilla/5.0 （windows NT 5.1;U）opera 7.54

       2.当opera伪装成IE6.0时，返回的user-Agent为：

        Mozilla/4.0 （compatible;MSIE 6.0;windows NT 5.1）opera 7.54---出现了compatible，MSIE 相当于opera模拟了IE的字符串

      Safari的格式 

           safari是apple自己推出的浏览器，基于Khtml的开源项目。

          格式：Mozilla/5.0(platform,security,os-or-cpu;language) Applewebkit/ApplewebkitVersion(kHTML,like Gecko )safari/safariVersion 

          比如：Mozilla/5.0(MAC,U,PPC MAC os x;en) Applewebkit/124(kHTML,like Gecko )safari/125.1 

         ---safari和Mozilla是兼容的
三：由于浏览器，对应升级着不同的版本，因此最好的检测方法就是检测最小版本。

     比如：

if(isIE5||isIE6||isIE7||isIE8)
{
   //要做的事
}
//只需要直接检测最小版本的即可
if(isMinIE5)
{
   //要做的事
}

四：如何检测Opera?

      首先我们封装一个函数，一会后面要用到。主要是比较版本的值。

 var suerAgent=navigator.userAgent;//保存user-Agent信息
 var fAppVersion=navigator.appVersion; //保存版本号
function compareVersion(sVersion1,sVersion2)
{
  //将版本拆分
   var aVersion1=sVersion1.split('.');
   var aVersion2=sVersion2.split('.');
  //如果版本长度不一致，则在较短的版本后面补0
  if(aVersion1.length>aVersion2.length)
  {
      for(var i=0;i<aVersion1.length-aVersion2.length;i++)
      {
         aVersion2.push('0');
      }
  }
  else if(aVersion1.length<aVersion2.length)
  {
       for(var i=0;i<aVersion1.length-aVersion2.length;i++)
      {
         aVersion1.push('0');
      }
  }
  //现在两个不同版本的位数相等，比较版本各个位数的大小。
  for(var i=0;i<aVersion1.length;i++)
  {
     var var1=parseInt(aVersion1[i],10);
     var var2=parseInt(aVersion2[i],10);
     if(var1<var2){return -1;}//前者小于后者
     else if(var1>var2){return 1;}//前者大于后者
  }
  return 0;//两者相等
}
console.log(compareVersion("1.3.4","2.3"));
console.log(compareVersion("1.13.2","1.3"));
console.log(compareVersion("3.4","3.4"));

      1.首先我们分析一下，opera的user-Agent中每一个都含有opera，因此最简单的方法就是检查是否含有字符opera。

var  isOpera=suerAgent.indexOf("Opera")>-1;（得到的为bool值）

     2.由于opera含有不同的版本，这里可以声明几个变量，用来测试不同版本的opera

var isMinOpera4=isMinOpera5=isMinOpera6=isMinOpera7=false  //每个变量都设为false，保证如果浏览器为非Opera时，能正确返回false

    3.由于opera有伪装，所以有两种方法来确定浏览器的版本。

      如果为自身的user-Agent:

if(isOpera)
{
   var  selfOperaVersion=null;
   if(navigator.appName=="Opera")
  {
        selfOperaVersion=fAppVersion;(fAppVersion为保存的版本号)
  }
}

     如果使用了伪装的user-Agent:

//下面我们来看一下，应该如何抽取？
var  popOperaVersion=new RegExp("opera(\d+\.\d+)");//注意这里用的是new RegExp()的方法，需要对d和.进行双重转义。

     所以综上两种情况，我们将代码整理下如下：

if(isOpera)
{
    var selfOperaVersion=null; 
    if(navigator.appName=="Opera")
    { 
       selfOperaVersion=fAppVersion;(fAppVersion为保存的版本号) 
   }
   else 
   {
     var popOperaVersion=new RegExp("opera(\d+\.\d+)");
     popOperaVersion.test(suerAgent);
     selfOperaVersion=parseFloat(RegExp["$1"]);//版本号存储在RegExp["$1"]中
   }
  //检测一下分别是什么版本的opera
   console.log((isMinOpera4=selfOperaVersion)>=4);
   console.log((isMinOpera5=selfOperaVersion)>=5);

}

五：如何检测safari?

     首先了解到Konqueror和safari都是基于KHTML，那么我们查看一下它的user-Agent字符：

     Mozilla/5.0(compatible;konqueror/2.2.2;sunos)

     Mozilla/5.0(compatible;konqueror/3.2;freeBSD)(KHTML,like Gecko)

     Mozilla/5.0(Mac;u;ppc mac os x;en)Applewebkit/51(like Gecko) safari/51

    暂列出上面三种典型的user-Agent,那么可以分析到safari中需要查找konqueror，Applewebkit，KHTML中的字符

    检测代码如下,这里不再详细讲述，同opera的类似：

var isKHTML = suerAgent.indexOf("KHTML")>-1||suerAgent.indexOf("konqueror")>-1||suerAgent.indexOf("Applewebkit")>-1;
var isMinSafari1=isMinSafari2=false;
var isKonq2_2=isKonq3=isKonq3_1=isKonq3_2=false;
if(isKHTML)
{
   //判断使用的是何种KHTML？只有两种，一种是safari，一种是konqueror
   isSafari=suerAgent.indexOf('Applewebkit')>-1;
   isKonq=suerAgent.indexOf('Applewebkit')>-1;
   if(isSafari)
   {
      //设置正则表达式
       var  popAppWebkit=new RegExp("Applewebkit\/(\d+(?:\.\d*)?)");//版本可以有小数，但不全是
       popAppWebkit.test(suerAgent);
       var  selfAPPVersion=parseFloat(RegExp["$1"]);
       console.log((isMinSafari1=selfAPPVersion)>=85);
       console.log((isMinSafari1=selfAPPVersion)>=124);
   }
  else if(isKonq)
  {
      //设置正则表达式
        var  popAppWebkit=new RegExp("konqueror\/(\d+(?:\.\d+(?:\.\d)?)?)");
      popAppWebkit.test(suerAgent);
       console.log((isKonq2_2=compareVersion(RegExp["$1"],"2.2"))>=0);
       console.log((isKonq3=compareVersion(RegExp["$1"],"3.0"))>=0);
       console.log((isKonq3_1=compareVersion(RegExp["$1"],"3.1"))>=0);
       console.log((isKonq3_2=compareVersion(RegExp["$1"],"3.2"))>=0);
  }
}

六：如何检测IE？

      先看一下IE的user-Agent的格式：Mozilla/4.0(compatible;MSIE 6.0;windows NT)

      那么主要检测compatible和MSIE 这两个字符即可。

      代码如下：

      var isIE=suserAgent.indexOf("compatible")>-1&&suserAgent.indexOf("MSIE ")>-1&&!isOpera;
      var isMinIE4=isMinIE5=isMinIE5_5=isMinIE6=false;
      if(isIE)
     {
          var  reIE=new RegExp("MSIE(\d+\.\d+)");
          reIE.test(suerAgent);
          var selfAPPVersion=parseInt(RegExp["$1"]);
          console.log((isMinIE4=selfAPPVersion)>=4);
          console.log((isMinIE5=selfAPPVersion)>=4);
          console.log((isMinIE5_5=selfAPPVersion)>=4);
     }

七：如何检测Mozilla?

      先来看下格式：Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0，注意要考虑opera的伪装以及Safari中出现的like Gecko。

      代码如下：

      var isMozilla=suerAgent.indexOf("Gecko")>-1&&!isKHTML;
      var  isMinMoz1=isMinMoz1_4=isMinMoz1_5=false;
      if(isMozilla)
     {

          var  reMozilla=new RegExp("rv:(\d+\.\d+(?:\.\d+)?)");
          reMozilla.test(suerAgent);
          var selfAPPVersion=parseFloat(RegExp["$1"]);
          console.log((isMinMoz1=compareVersion(RegExp["$1"]),"1.0")>=0);
          console.log((isMinMoz1_4=compareVersion(RegExp["$1"]),"1.4")>=0);
          console.log((isMinMoz1_5=compareVersion(RegExp["$1"]),"1.5")>=0);
     }

    到此以上，所有的浏览器的检测均已完成。