好程式員web前端教育訓練分享如何用js檢測浏覽器類型

　　這個需求在前端開發當中是很常見的，大家都知道我們寫的js或css在浏覽器中是有相容問題的，當下雖然大家可能不用感受的IE6帶來的痛苦（别問我為什麼是痛苦），但是你負責的項目本身就是政府、醫院之類的項目，這個時候還是得受相容問題的困擾。

　　解決方案一：老老實實的在寫html、css和js的時候就考慮相容的問題，邊寫邊測試，完成後自然就是相容的了。這就需要你下載下傳各種浏覽器，IE浏覽器就用IETester測試（IETester是一個免費的Web浏覽器調試工具 ），IETester的坑非常多，根本不準，真實IE6還是會出bug（哭），後面學乖了，安裝虛拟機，虛拟機裡面裝XP，XP自帶了IE6，做好還用真的浏覽器測試一下。這種方法花費的精力蠻多的，你自己搜尋一下IE6/7/8的css相容問題就明白了，是以還是用方法二吧。

　　解決方案二：直接檢測浏覽器類型和版本，給出提示資訊，直接讓使用者不用IE打開就行，那就是讓使用者更新浏覽器了，一勞永逸的方法。效果如下所示：

具體的實作方法也比較簡單，JavaScript 包含一個名為 Navigator 的對象 ，Navigator 包含了有關通路者浏覽器的資訊，包括浏覽器類型、版本等等 。Navigator對象裡面含有兩個重要的屬性，appName （儲存浏覽器類型 ），appVersion （儲存有浏覽器的版本資訊 ）。下面我們用代碼來測試一下：

var browser = navigator.appName;//擷取浏覽器名字    var b_version = navigator.appVersion;//擷取浏覽器版本資訊    var version = parseFloat(b_version);//提取浏覽器版本号​
document.write("浏覽器名稱是: " + browser)//浏覽器名稱是: Netscape    document.write("<br />")
document.write("浏覽器版本是: " + version)//浏覽器版本是: 5</script>           

上面例子中的 browser 變量存有浏覽器的名稱，比如，非IE顯示"Netscape" 或者 IE顯示"Microsoft Internet Explorer" ，是以隻能判别是IE還是非IE,如果你是想讓使用者不用IE浏覽器，這樣也可以了。這裡要注意一點，IE的版本号是有點問題的，IE4/5/6的版本号都是4.0，是以我們就可以做到：如果使用者使用的是IE6或以下版本，請使用者更新浏覽器。

function detectBrowser() {
    var browser = navigator.appName//擷取浏覽器名字        var b_version = navigator.appVersion//擷取浏覽器版本資訊        var version = parseFloat(b_version)//提取浏覽器版本号​
    if ((browser == "Netscape" || browser == "Microsoft Internet Explorer")
        && (version >= 4)) {
        console.log('非IE浏覽器，能通路頁面');
    }
    else { alert("優秀的小夥伴都選擇切換其他浏覽器或更新IE浏覽器了哦") }
}​
detectBrowser();//調用函數，判别浏覽器，如果是IE低版本提示使用者更新</script>           

當然，如果你想判别具體是哪種浏覽器，那還得利用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 ，

用火狐測試；隻要我們判斷這段字元串裡面包含Firefox就可以判斷當下我們就是用火狐浏覽器了，同樣的方法我們可以用來檢測各個浏覽器：

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核心 browser='IE 11';

}

return browser;}

如果你還想進一步判斷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+);');
// 正規表達式比對浏覽器的userAgent字元串中MSIE後的數字部分，，這一步不可省略！！！    IEReg.test(userAgent);
// 取正規表達式中第一個小括号裡比對到的值    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，提示使用者更新或切換其他浏覽器：

第一步：聲明一個函數（可以判斷各個浏覽器和版本）

function getBroswerAndVersion(){//該函數可以判斷各種浏覽器和版本，最厲害的版本 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; 
           

info += "Edge";            

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];            

info += "unknown";            

}

return info;}

第二步：調用函數，得到的結果再判斷給使用者提示即可

var bro = getBroswerAndVersion();//上面第一步封裝的函數，調用會得到一個傳回值if(bro=="IE5" || bro=="IE6" || bro=="IE7" || bro=="IE8" ){

alert("浏覽器版本過低!請更新至IE9以上");//此處應該顯示一個漂亮的圖檔，讓使用者覺得再不更新就是out了}