如何檢測現在主流的幾大瀏覽器？

          在客戶端中，瀏覽器最重要的檢測對象是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);
     }

    到此以上，所有的瀏覽器的檢測均已完成。