1. 程式人生 > >angualarjs使用過程中判斷瀏覽器版本以及相容性的方法

angualarjs使用過程中判斷瀏覽器版本以及相容性的方法

再使用過程中,使用者會是不是的點中瀏覽器的相容性會使一部分效能載入不出來,這是就需要為使用者進行提示。

第一部分:html頁面部分。

<div style="position: absolute; top: 0; left: 0; z-index: 999; width: 100%; line-height: 30px; text-align: center; background-color: red; color: #fff; display: none;" id="checkIEVersionDiv"></div>

第二部分:所使用的到的js封裝方法:

/* 為保證angularjs的顯示效果,判斷ie瀏覽器版本是否過低*/
      $scope.checkIEVersion = function () {         
          var mb = sp.getMyBrowser(); ///獲取瀏覽器判斷返回的值
          if (mb == undefined || mb == null || mb == "") {
              $("#checkIEVersionDiv").text("您正在使用相容模式,網站的樣式可能會發生變化,請您更換Google Chrome瀏覽器或IE9以上版本瀏覽器進行瀏覽。");
              $("#checkIEVersionDiv").show();              
          } else {
              var mbArray = mb.split("|");
              if (mbArray[1] == "alert") {
                  $("#checkIEVersionDiv").text("您正在使用360瀏覽器瀏覽,網站的樣式可能會發生變化,請您更換Google Chrome瀏覽器或IE9以上版本瀏覽器進行瀏覽。");
                  $("#checkIEVersionDiv").show();
              } else if (mbArray[1] == "false") {
                  $("#checkIEVersionDiv").show();
                  $("#checkIEVersionDiv").text("您正在使用低版本IE瀏覽器瀏覽,網站的樣式可能會發生變化,請您更換Google Chrome瀏覽器或IE9以上版本瀏覽器進行瀏覽。");                 
              } else {
                  $("#checkIEVersionDiv").hide();                  
              }
          }          
      }
      $scope.checkIEVersion();

/* 為保證angularjs的顯示效果,判斷ie瀏覽器版本是否過低*/

sp.getMyBrowser = function () {
    var userAgent = window.navigator.userAgent; //取得瀏覽器的userAgent字串
    var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Opera瀏覽器
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判斷是否IE瀏覽器
    if (!isIE) {
        isIE = userAgent.indexOf("Windows NT") > -1 && userAgent.indexOf("BOIE") > -1 && !isOpera; //判斷是否IE瀏覽器
    }
    var is360 = isIE && ((window.navigator.userProfile + '') == 'null');//判斷是否360瀏覽器
    var isFF = userAgent.indexOf("Firefox") > -1; //判斷是否Firefox瀏覽器
    var isChrome = userAgent.indexOf("Chrome") > -1; //判斷是否Safari瀏覽器
    var isSafari = userAgent.indexOf("Safari") > -1 && !isChrome; //判斷是否Safari瀏覽器
    if (isIE && !is360) {
        var IE5 = IE55 = IE6 = IE7 = IE8 = false;
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        IE55 = fIEVersion == 5.5;
        IE6 = fIEVersion == 6.0;
        IE7 = fIEVersion == 7.0;
        IE8 = fIEVersion == 8.0;
        if (IE55) {
            return "IE55|false";
        } else if (IE6) {
            return "IE6|false";
        } else if (IE7) {
            return "IE7|false";
        } else if (IE8) {
            return "IE8|false";
        } else {
            return "IE9|true";
        }       
    } //isIE end
    if (is360) {
        return "360|alert";
    }
    if (isFF) {
        return "FF|true";
    }
    if (isChrome) {
        return "Chrome|true";
    }
    if (isOpera) {
        return "Opera|true";
    }
    if (isSafari) {
        return "Safari|true";
    }    
}

第三部分:樣式展示