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

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

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

具體的實現方法也比較簡單，JavaScript 包含一個名為 Navigator 的物件，Navigator 包含了有關訪問者瀏覽器的資訊，包括瀏覽器型別、版本等等。Navigator物件裡面含有兩個重要的屬性，appName （儲存瀏覽器型別），appVersion （儲存有瀏覽器的版本資訊）。下面我們用程式碼來測試一下：

< script type = "text/javascript" >

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或以下版本，請使用者升級瀏覽器。

< script type = "text/javascript" >

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;

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

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

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

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

好程式設計師web前端培訓分享如何用js檢測瀏覽器型別

相關文章