這個(gè)需求在前端開(kāi)發(fā)當(dāng)中是很常見(jiàn)的，大家都知道我們寫(xiě)的js或css在瀏覽器中是有兼容問(wèn)題的，當(dāng)下雖然大家可能不用感受的IE6帶來(lái)的痛苦(別問(wèn)我為什么是痛苦)，但是你負(fù)責(zé)的項(xiàng)目本身就是政府、醫(yī)院之類(lèi)的項(xiàng)目，這個(gè)時(shí)候還是得受兼容問(wèn)題的困擾。

　　解決方案一：老老實(shí)實(shí)的在寫(xiě)html、css和js的時(shí)候就考慮兼容的問(wèn)題，邊寫(xiě)邊測(cè)試，完成后自然就是兼容的了。這就需要你下載各種瀏覽器，IE瀏覽器就用IETester測(cè)試(IETester是一個(gè)免費(fèi)的Web瀏覽器調(diào)試工具 )，IETester的坑非常多，根本不準(zhǔn)，真實(shí)IE6還是會(huì)出bug(哭)，后面學(xué)乖了，安裝虛擬機(jī)，虛擬機(jī)里面裝XP，XP自帶了IE6，做好還用真的瀏覽器測(cè)試一下。這種方法花費(fèi)的精力蠻多的，你自己搜索一下IE6/7/8的css兼容問(wèn)題就明白了，所以還是用方法二吧。

　　解決方案二：直接檢測(cè)瀏覽器類(lèi)型和版本，給出提示信息，直接讓用戶(hù)不用IE打開(kāi)就行，那就是讓用戶(hù)升級(jí)瀏覽器了，一勞永逸的方法。效果如下所示：

　　具體的實(shí)現(xiàn)方法也比較簡(jiǎn)單，JavaScript 包含一個(gè)名為 Navigator 的對(duì)象 ，Navigator 包含了有關(guān)訪問(wèn)者瀏覽器的信息，包括瀏覽器類(lèi)型、版本等等 。Navigator對(duì)象里面含有兩個(gè)重要的屬性，appName (保存瀏覽器類(lèi)型 )，appVersion (保存有瀏覽器的版本信息 )。下面我們用代碼來(lái)測(cè)試一下：

　　上面例子中的 browser 變量存有瀏覽器的名稱(chēng)，比如，非IE顯示"Netscape" 或者 IE顯示"Microsoft Internet Explorer" ，所以只能判別是IE還是非IE,如果你是想讓用戶(hù)不用IE瀏覽器，這樣也可以了。這里要注意一點(diǎn)，IE的版本號(hào)是有點(diǎn)問(wèn)題的，IE4/5/6的版本號(hào)都是4.0，所以我們就可以做到：如果用戶(hù)使用的是IE6或以下版本，請(qǐng)用戶(hù)升級(jí)瀏覽器。

　　當(dāng)然，如果你想判別具體是哪種瀏覽器，那還得利用Navigator 的對(duì)象的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 ，

　　用火狐測(cè)試;只要我們判斷這段字符串里面包含F(xiàn)irefox就可以判斷當(dāng)下我們就是用火狐瀏覽器了，同樣的方法我們可以用來(lái)檢測(cè)各個(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è)小括號(hào)里匹配到的值

　　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

　　}

　　}

　　綜合上面的方法，我們就可以回到今天的主題啦，我們的需求是：如果用戶(hù)使用的是IE5/6/7/8，提示用戶(hù)升級(jí)或切換其他瀏覽器：

　　第一步：聲明一個(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é)果再判斷給用戶(hù)提示即可

　　var bro = getBroswerAndVersion();//上面第一步封裝的函數(shù)，調(diào)用會(huì)得到一個(gè)返回值

　　if(bro=="IE5" || bro=="IE6" || bro=="IE7" || bro=="IE8" ){

　　alert("瀏覽器版本過(guò)低!請(qǐng)升級(jí)至IE9以上");//此處應(yīng)該顯示一個(gè)漂亮的圖片，讓用戶(hù)覺(jué)得再不升級(jí)就是out了

　　}