判斷瀏覽器型別和版本的javascript程式碼例項

antzone發表於2017-04-13
瀏覽器型別JavaScript

當前市場上的瀏覽器型別和型別可以說不計其數。

又由於各個型別或者版本對於同一個頁面解析不同，所以有時候需要根據不同的瀏覽器型別和版本進行設定。

那麼就首先要知道瀏覽器的版本和型別，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
var BrowserMatch = {
  init: function () {
    this.browser = this.getBrowser().browser || "An Unknown Browser";
    this.version = this.getBrowser().version || "An Unknown Version";
    this.OS = this.getOS() || "An Unknown OS";
  },
  getOS:function(){
    if(navigator.platform.indexOf("Win")!= -1) return "Windows";
    if(navigator.platform.indexOf("Mac")!= -1) return "Mac";
    if(navigator.platform.indexOf("Linux")!= -1) return "Linux";
    if(navigator.userAgent.indexOf("iPhone")!= -1) return "iPhone/iPod";
  },
  getBrowser:function () {
    var rMsie = /(msie\s|trident\/7)([\w\.]+)/;
    var rTrident = /(trident)\/([\w.]+)/;
    var rFirefox = /(firefox)\/([\w.]+)/; 
    var rOpera = /(opera).+version\/([\w.]+)/;
    var rNewOpera = /(opr)\/(.+)/;
    var rChrome = /(chrome)\/([\w.]+)/;
    var rSafari = /version\/([\w.]+).*(safari)/;
    var ua = navigator.userAgent.toLowerCase();
    var matchBS,matchBS2;
    matchBS = rMsie.exec(ua);
    if (matchBS != null) {
      matchBS2 = rTrident.exec(ua);
      if (matchBS2 != null){
        switch (matchBS2[2]){
          case "4.0": return { browser : "IE", version : "8" };break;
          case "5.0": return { browser : "IE", version : "9" };break;
          case "6.0": return { browser : "IE", version : "10" };break;
          case "7.0": return { browser : "IE", version : "11" };break;
          default:return { browser : "IE", version : "Undefined" };
        }
      }else{
        return {browser : "IE", version : matchBS[2] || "0" };
      }
    }
    matchBS = rFirefox.exec(ua);  
    if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {  
      return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
    }
    matchBS = rOpera.exec(ua);         
    if ((matchBS != null)&&(!(window.attachEvent))) {     
      return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
    }
    matchBS = rChrome.exec(ua);  
    if ((matchBS != null)&&(!!(window.chrome))&&(!(window.attachEvent))) {
      matchBS2 = rNewOpera.exec(ua);       
      if(matchBS2 == null){
        return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
      }else{
        return { browser : "Opera", version : matchBS2[2] || "0" };
      }  
    }
    matchBS = rSafari.exec(ua);          
    if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {   
      return { browser : matchBS[2] || "", version : matchBS[1] || "0" };
    }           
  }
};  
BrowserMatch.init();
window.onload = function () {
  var odiv = document.getElementById("antzone");
  BrowserMatch.init();
  var str = "";
  str = "瀏覽器名稱:" + BrowserMatch.browser + "<br/>";
  str = str + "瀏覽器版本:" + BrowserMatch.version + "<br/>";
  str = str + "作業系統:" + BrowserMatch.OS;
  odiv.innerHTML = str;
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

相關文章