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";
}
}
第三部分:樣式展示