在我們開發頁面中總會遇到解決兼容問題,一般通過css hack根據不同瀏覽器寫不同的css,或者判斷瀏覽器加載不同的模塊。在這里我們將分享判斷ie的方法
一、IE條件注釋(h5方法)
IE的判斷寫法只兼容到IE9,IE10及其以上只能顯示非IE的注釋內容
<!--[if lt IE 7 ]> 小於IE <![endif]--> <!--[if IE 7 ]> IE7 <![endif]--> <!--[if IE 8 ]> IE8 <![endif]--> <!--[if IE 9 ]> IE9 <![endif]--> <!--[if (gt IE 9)|!(IE)]>IE9以上或者非IE<![endif]-->
二、js判斷
在IE瀏覽器之前,一般通過MSIE來判斷,但IE之后判斷就有些變化了。通過瀏覽器自帶的navigator.userAgent方法做相應的判斷。
1.區分IE和其他主流瀏覽器
function isIE() { return navigator.userAgent.toLowerCase().indexOf('trident')>-1?true:false; }
或者
function isIE(){ if(!!window.ActiveXObject || "ActiveXObject" in window){ return true; }else{ return false; } }
2.判斷IE並給出相應的版本
function IEVersion() { var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判斷是否IE<11瀏覽器 var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判斷是否IE的Edge瀏覽器 var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; if(isIE) { var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); reIE.test(userAgent); var fIEVersion = parseFloat(RegExp["$1"]); if(fIEVersion == 7) { return 7; } else if(fIEVersion == 8) { return 8; } else if(fIEVersion == 9) { return 9; } else if(fIEVersion == 10) { return 10; } else { return 6;//IE版本<=7 } } else if(isEdge) { return 'edge';//edge } else if(isIE11) { return 11; //IE11 }else{ return -1;//不是ie瀏覽器 } }
3.判斷主流瀏覽器版本
function browserVersion() { var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判斷是否IE<11瀏覽器 var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //Edge瀏覽器 var isFirefox = userAgent.indexOf("Firefox") > -1; //Firefox瀏覽器 var isOpera = userAgent.indexOf("Opera")>-1 || userAgent.indexOf("OPR")>-1 ; //Opera瀏覽器 var isChrome = userAgent.indexOf("Chrome")>-1 && userAgent.indexOf("Safari")>-1 && userAgent.indexOf("Edge")==-1 && userAgent.indexOf("OPR")==-1; //Chrome瀏覽器 var isSafari = userAgent.indexOf("Safari")>-1 && userAgent.indexOf("Chrome")==-1 && userAgent.indexOf("Edge")==-1 && userAgent.indexOf("OPR")==-1; //Safari瀏覽器 if(isIE) { var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); reIE.test(userAgent); var fIEVersion = parseFloat(RegExp["$1"]); if(fIEVersion == 7) { return 'IE7'; } else if(fIEVersion == 8) { return 'IE8'; } else if(fIEVersion == 9) { return 'IE9'; } else if(fIEVersion == 10) { return 'IE10'; } else { return 'IE6';//IE版本<7 } } else if(isIE11) { return 'IE11'; } else if(isEdge) { return 'Edge'+userAgent.split('Edge/')[1].split('.')[0]; } else if(isFirefox) { return 'Firefox'+userAgent.split('Firefox/')[1].split('.')[0]; } else if(isOpera) { return 'Opera'+userAgent.split('OPR/')[1].split('.')[0]; } else if(isChrome) { return 'Chrome'+userAgent.split('Chrome/')[1].split('.')[0]; } else if(isSafari) { return 'Safari';+userAgent.split('Safari/')[1].split('.')[0]; } else{ return -1;//不是ie瀏覽器 } }
