js判斷是否是ie瀏覽器且給出ie版本

單版本IE

　　如果要通過能力檢測識別出單獨的某一版本IE瀏覽器，document.documentMode 屬性無疑非常合適。該屬性只有IE瀏覽器支持，表示當前的文檔模式 

  //IE11返回11，IE10返回10，IE9返回9，IE8返回8，IE7返回7，IE6返回6
  function IEVersion () {
    if (document.documentMode) return document.documentMode;
  }
  if (IEVersion()) {
    console.log('當前IE瀏覽器版本號是', IEVersion());
  } else {
    console.log('當前瀏覽器可能不是IE瀏覽器');
  }

 

IE7-

　　除了使用document.documentMode屬性外，還有其他方法

　　【1】IE7-瀏覽器中，獲取特性節點將獲得包括內置特性的所有特性，第0個特性節點是onmsanimationiteration，且其specified屬性是false。而IE8+及其他瀏覽器僅僅可以獲得經過設置的特性節點，且specified屬性永遠是true

function lteIE7(){
    var div = document.createElement('div');
    var temp = div.attributes[0];
    return (Boolean(temp) && !temp.specified);
}

　　【2】IE7-瀏覽器不支持querySelector()和querySelectorAll()

function lteIE7(){
    var temp = typeof document.querySelector;
    if(temp == 'undefined'){
        return true;
    }
}

　　【3】IE7-瀏覽器不支持JSON對象

function lteIE7(){
    try{
        JSON;
    }catch(error){
        return true;
    }    
}

 

IE8-

　　【1】IE8-瀏覽器不支持getComputedStyle()方法，該方法是一組在顯示元素時實際使用的屬性值，用一個 CSSStyleDeclaration對象來表示的

function lteIE8(){
    var temp = typeof window.getComputedStyle;
    if(temp == 'undefined'){
        return true;
    }
}

　　【2】IE8-瀏覽器不支持文檔類型節點的快捷寫法document.doctype

function lteIE8(){
    var temp = document.doctype;
    if(temp == null){
        return true;
    }
}

　　【3】IE8-的宿主對象是通過COM而非javascript實現的。因此，document.createElement()函數是一個COM對象，所以typeof才會返回"Object"

function lteIE8(){
    var temp = typeof document.createElement
    if(temp == "object"){
        return true;
    }
}

 

IE9-

　　【1】IE9-瀏覽器不支持HTML5新增的定時器requestAnimationFrame

function lteIE9(){
    try{
        requestAnimationFrame;
    }catch(error){
        return true;
    }    
}

　　【2】async屬性是HTML5新增的屬性，IE9-瀏覽器不支持

function lteIE9(){
    var temp = document.createElement('script');
    if(!temp.async){
        return true;
    }
}

　　【3】window.matchMedia()方法用來檢查CSS的mediaQuery語句，IE9-瀏覽器不支持

function lteIE9(){
    var temp = window.matchMedia;
    if(!temp){
        return true;
    }
}

 

IE10-

　　【1】IE10-瀏覽器不支持自定義屬性dataset

function lteIE10(){
    var temp = document.createElement('div').dataset;
    if(!temp){
        return true;
    }
}

　　【2】IE10-瀏覽器不支持navigator對象的language屬性

function lteIE10(){
    var temp = navigator.language;
    if(!temp){
        return true;
    }
}

　　【3】IE10-瀏覽器不支持navigator對象的product屬性

function lteIE10(){
    var temp = navigator.product;
    if(!temp){
        return true;
    }
}

 

 

 

chrome

　　chrome瀏覽器在window對象下有一個專有的chrome屬性，返回一個對象

 

 

 

 

 

 

1. 怎么去看瀏覽器的內核等信息 ---- js的全局對象window子屬性navigator.userAgent，這個屬性是包含了瀏覽器信息的相關信息，包括我們需要的瀏覽器內核
2. navigator.userAgent這個值取出來是個字符串，可以通過string的 indexOf方法或者正則匹配來驗證關鍵字符串
3. ie11和edge的判斷方式有所不同，后面我會給出幾個圖
4. 這個是ie11的userAgent
5. 這個是edge的userAgent
6. ie9的userAgent
7. ie8的userAgent
8. ie10的userAgent

 你一定發現了，ie11和edge的userAgent是和ie8,9,10差別蠻大的，那么對用的在寫js時需要特別判斷，下面給出我寫好的一段判斷是否是ie且給出ie版本號的js代碼段

 

        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瀏覽器
            }
        }

 

通過調用 IEVersion()可以獲得返回值，值如下

值	值類型	值說明
-1	Number	不是ie瀏覽器
6	Number	ie版本<=6
7	Number	ie7
8	Number	ie8
9	Number	ie9
10	Number	ie10
11	Number	ie11
'edge'	String	ie的edge瀏覽器