這個(gè)需求在前端開發(fā)當(dāng)中是很常見的，大家都知道我們寫的js或css在瀏覽器中是有兼容問題的，當(dāng)下雖然大家可能不用感受的IE6帶來的痛苦(別問我為什么是痛苦)，但是你負(fù)責(zé)的項(xiàng)目本身就是政府、醫(yī)院之類的項(xiàng)目，這個(gè)時(shí)候還是得受兼容問題的困擾。
解決方案一：老老實(shí)實(shí)的在寫html、css和js的時(shí)候就考慮兼容的問題，邊寫邊測試，完成后自然就是兼容的了。這就需要你下載各種瀏覽器，IE瀏覽器就用IETester測試(IETester是一個(gè)免費(fèi)的Web瀏覽器調(diào)試工具 )，IETester的坑非常多，根本不準(zhǔn)，真實(shí)IE6還是會(huì)出bug(哭)，后面學(xué)乖了，安裝虛擬機(jī)，虛擬機(jī)里面裝XP，XP自帶了IE6，做好還用真的瀏覽器測試一下。這種方法花費(fèi)的精力蠻多的，你自己搜索一下IE6/7/8的css兼容問題就明白了，所以還是用方法二吧。
解決方案二：直接檢測瀏覽器類型和版本，給出提示信息，直接讓用戶不用IE打開就行，那就是讓用戶升級瀏覽器了，一勞永逸的方法。效果如下所示：
具體的實(shí)現(xiàn)方法也比較簡單，JavaScript 包含一個(gè)名為 Navigator 的對象 ，Navigator 包含了有關(guān)訪問者瀏覽器的信息，包括瀏覽器類型、版本等等 。Navigator對象里面含有兩個(gè)重要的屬性，appName (保存瀏覽器類型 )，appVersion (保存有瀏覽器的版本信息 )。下面我們用代碼來測試一下：
上面例子中的 browser 變量存有瀏覽器的名稱，比如，非IE顯示"Netscape" 或者 IE顯示"Microsoft Internet Explorer" ，所以只能判別是IE還是非IE,如果你是想讓用戶不用IE瀏覽器，這樣也可以了。這里要注意一點(diǎn)，IE的版本號是有點(diǎn)問題的，IE4/5/6的版本號都是4.0，所以我們就可以做到：如果用戶使用的是IE6或以下版本，請用戶升級瀏覽器。
當(dāng)然，如果你想判別具體是哪種瀏覽器，那還得利用Navigator 的對象的userAgent屬性，比如：
var userAgent = navigator.userAgent;
console.log(userAgent);
這里打印的是：Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:73.0) Gecko/20100101 Firefox/73.0 ，
用火狐測試;只要我們判斷這段字符串里面包含F(xiàn)irefox就可以判斷當(dāng)下我們就是用火狐瀏覽器了，同樣的方法我們可以用來檢測各個(gè)瀏覽器：
function getBrowserType(){
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
var browser='unknown';
if (userAgent.indexOf("IE")!=-1) {//字符串含有IE字段，表明是IE瀏覽器
browser="IE";
}else if(userAgent.indexOf('Firefox')!=-1){//字符串含有Firefox字段，表明是火狐瀏覽器
browser="Firefox";
}else if(userAgent.indexOf('OPR')!=-1){//Opera
browser="Opera";
}else if(userAgent.indexOf('Chrome')!=-1){//Chrome
browser="Chrome";
}else if(userAgent.indexOf('Safari')!=-1){//Safari
browser="Safari";
}else if(userAgent.indexOf('Trident')!=-1){//IE內(nèi)核
browser='IE 11';
}
return browser;
}
如果你還想進(jìn)一步判斷IE瀏覽器的版本 ，比如：edge，ie11，10，9，8，7，6，5，4 ，代碼如下：
// 獲取IE版本
function IEVersion() {
// 取得瀏覽器的userAgent字符串
var userAgent = navigator.userAgent;
// 判斷是否為小于IE11的瀏覽器
var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
// 判斷是否為IE的Edge瀏覽器
var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
// 判斷是否為IE11瀏覽器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
if (isLessIE11) {
var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
// 正則表達(dá)式匹配瀏覽器的userAgent字符串中MSIE后的數(shù)字部分，，這一步不可省略!!!
IEReg.test(userAgent);
// 取正則表達(dá)式中第一個(gè)小括號里匹配到的值
var IEVersionNum = parseFloat(RegExp['$1']);
if (IEVersionNum === 7) {
// IE7
return 7
} else if (IEVersionNum === 8) {
// IE8
return 8
} else if (IEVersionNum === 9) {
// IE9
return 9
} else if (IEVersionNum === 10) {
// IE10
return 10
} else {
// IE版本<7
return 6
}
} else if (isEdge) {
// edge
return 'edge'
} else if (isIE11) {
// IE11
return 11
} else {
// 不是ie瀏覽器
return -1
}
}
綜合上面的方法，我們就可以回到今天的主題啦，我們的需求是：如果用戶使用的是IE5/6/7/8，提示用戶升級或切換其他瀏覽器：
第一步：聲明一個(gè)函數(shù)(可以判斷各個(gè)瀏覽器和版本)
function getBroswerAndVersion(){//該函數(shù)可以判斷各種瀏覽器和版本，最厲害的版本
var os = navigator.platform;
var userAgent = navigator.userAgent;
var info = "";
var tempArray = "";
//判斷瀏覽器版本
var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Opera瀏覽器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判斷是否IE瀏覽器
var isEdge = userAgent.toLowerCase().indexOf("edge") > -1 && !isIE; //判斷是否IE的Edge瀏覽器
var isIE11 = (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1);
if (/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)) {
tempArray = /([Ff]irefox)\/(\d+\.\d+)/.exec(userAgent);
info += tempArray[1] + tempArray[2];
} else if (isIE) {
var version = "";
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7)
{ version = "IE7"; }
else if (fIEVersion == 8)
{ version = "IE8"; }
else if (fIEVersion == 9)
{ version = "IE9"; }
else if (fIEVersion == 10)
{ version = "IE10"; }
else
{ version = "0" }
info += version;
} else if (isEdge) {
info += "Edge";
} else if (isIE11) {
info += "IE11";
} else if (/[Cc]hrome\/\d+/.test(userAgent)) {
tempArray = /([Cc]hrome)\/(\d+)/.exec(userAgent);
info += tempArray[1] + tempArray[2];
} else if (/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)) {
tempArray = /[Vv]ersion\/(\d+\.\d+\.\d+)(\.\d)* *([Ss]afari)/.exec(userAgent);
info += tempArray[3] + tempArray[1];
} else if (/[Oo]pera.+[Vv]ersion\/\d+\.\d+/.test(userAgent)) {
tempArray = /([Oo]pera).+[Vv]ersion\/(\d+)\.\d+/.exec(userAgent);
info += tempArray[1] + tempArray[2];
} else {
info += "unknown";
}
return info;
}
第二步：調(diào)用函數(shù)，得到的結(jié)果再判斷給用戶提示即可
var bro = getBroswerAndVersion();//上面第一步封裝的函數(shù)，調(diào)用會(huì)得到一個(gè)返回值
if(bro=="IE5" || bro=="IE6" || bro=="IE7" || bro=="IE8" ){
alert("瀏覽器版本過低!請升級至IE9以上");//此處應(yīng)該顯示一個(gè)漂亮的圖片，讓用戶覺得再不升級就是out了
}
京公網(wǎng)安備 11010802030320號