開發的過程中注意如果到使用者體驗，就有需要處理到瀏覽器相容性的回應與提示處理，例如如果考量到要向下相容的 IE 版本，像是 IE9 (處理 IE 真的是給他 OOXX) 在 HTML5 中不能使用正規表示式來處理輸入字元的驗證回應，最好是在頁面戴入舊版的瀏覽器時就可以出現提示或是直接不然使用者操作使用，這樣才不會發生如果使用的插件或是 JavaScript 如果不支援的話，就不知道裝態與內容，或是 CSS3 的動畫效果與 Flex，低版瀏覽器出法渲染出來。
01-單純只處理 IE 版本，IE9 以下無法對應
1 2 3 4 5 | // 用JS判斷瀏覽器是否是IE9以下，處理可能遇到的兼容性問題，或者給出瀏覽器版本過低的升級提醒。 if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace( /[ ]/g, "").replace("MSIE", "")) < 10) { alert("您的瀏覽器版本過舊，請更新至IE10及以上版本，或使用 Firefox 與 Google Chrome 等最新版瀏覽器，將會有較好的使用體驗"); } |
02-針對瀏覽器的使用程式名或是版本判斷
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | /*---------- 一、判斷當前瀏覽類型及IE瀏覽器版本 (唯一缺點就是 IE7與IE5不分,但是IE6以下的判別已經不重要了) ----------*/ function BrowserType() { var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Opera瀏覽器 // var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判斷是否IE瀏覽器 var isIE = window.ActiveXObject || "ActiveXObject" in window // var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判斷是否IE的Edge瀏覽器 var isEdge = userAgent.indexOf("Edge") > -1; //判斷是否IE的Edge瀏覽器 var isFF = userAgent.indexOf("Firefox") > -1; //判斷是否Firefox瀏覽器 var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判斷是否Safari瀏覽器 var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1&&!isEdge; //判斷Chrome瀏覽器 if (isIE){ var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); reIE.test(userAgent); var fIEVersion = parseFloat(RegExp["$1"]); if(userAgent.indexOf('MSIE 6.0')!=-1){ return "IE6"; } else if(fIEVersion == 7){ return "IE7";} else if(fIEVersion == 8){ return "IE8";} else if(fIEVersion == 9){ return "IE9";} else if(fIEVersion == 10){ return "IE10";} else if(userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)){ return "IE11"; } else{ return "0" }//IE版本過低 }//isIE end if (isFF) { return "FF";} if (isOpera) { return "Opera";} if (isSafari) { return "Safari";} if (isChrome) { return "Chrome";} if (isEdge) { return "Edge";} }//myBrowser() end console.log(BrowserType()); /*---------- 二、關於IE各版本瀏覽器判別的方法整理 ----------*/ // 下面是支持ie11的版本的，當然ie6-10也是支持的 function isIE() { //ie? console.log('window.ActiveXObject', window.ActiveXObject); if (window.ActiveXObject || "ActiveXObject" in window) { return '支持ie11, ie6-10也是支持',true; } else { return false; } } console.log(isIE()) // IE11的userAgent裡是沒有MSIE標誌的，，所以只可以判斷IE10及10以下瀏覽器 function isIE() { if (window.navigator.userAgent.indexOf("MSIE") >= 1) return '沒有MSIE標誌', true; else return '沒有MSIE標誌', false; } // //可以判斷IE10及10以下瀏覽器，因為IE11不支持document.all了 console.log('document.all: ' , document.all); if (document.all) { console.log("is IE!"); } //判斷是否是IE8及以下版本的瀏覽器 //原理是利用了IE8及以下版本的瀏覽器與標準瀏覽器在處理數組的toString方法的差異做成的。 //-[1,]是為了實現該方法 //對於標準遊覽器，如果數組裡面最後一個字符為逗號，JS引擎會自動剔除它 var ie = !-[1,]; if (ie) { console.log('IE8及以下版本的瀏覽器'); } else { console.log('不是IE8及以下版本的瀏覽器'); } //判斷IE11 if (navigator.userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) { console.log('IE11') } else { console.log('不是IE11') } //支持Edge var isEdge = navigator.userAgent.indexOf("Edge") > -1; //判斷是否IE的Edge瀏覽器 if (isEdge) { console.log('Edge'); } else { console.log('不是Edge'); } |
See the Pen 用js判斷瀏覽器類型及IE具體各版本，支持IE11及Edge瀏覽器 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
Comments are closed.