Dorea.js框架介紹：關於IE/Edge瀏覽器的兼容處理

原創

2020-06-19 18:26

不少小夥伴經常要處理IE/Edge瀏覽器的兼容（主要是外包，還是接事業單位的項目的夥伴）。樣式的處理可以使用css hack，但部分無法使用hack的，只能操作腳本去控制樣式的變化/腳本兼容處理。但不能需要用的時候再去判斷是否ie瀏覽器，然後再寫腳本處理，這裏太麻煩了。下面介紹一個函數，一次直接判斷，處理時直接調用即可。

function ie(param){
    var ua = navigator.userAgent,
    isIE = ua.indexOf("compatible") > -1 && ua.indexOf("MSIE") > -1, //ie<11 
    isEdge = ua.indexOf("Edge") > -1 && !isIE,   
    isIE11 = ua.indexOf('Trident') > -1 && ua.indexOf("rv:11.0") > -1;
    /*
        * 判斷是否IE11以下的瀏覽器，IE11返回的userAgent不同於11版本以下的
        * 直接執行相對應的回調
    */ 
    if(isIE) {
        var regIE = new RegExp("MSIE (\\d+\\.\\d+);");
        regIE.test(ua)
        var ver = parseFloat(RegExp["$1"]);
        switch (ver) {
            case ver<7:
                break;
            default:
                param["ie"+ver]?param["ie"+ver]():"";
                break;
        }                 
    } else if(isEdge) {
        param.edge? param.edge():"";
    } else if(isIE11) {
        param.ie11? param.ie11():"";
    }
}

注意：在win10上，IE5會返回IE7的userAgent，所以會按照IE7的回調去處理。

執行結果：

ie({
    "ie6":function (){
        console.log("這是ie7瀏覽器");
    },
    "ie7":function (){
        console.log("這是ie7瀏覽器");
    },
    "ie8":function (){
        console.log("這是ie8瀏覽器");
    },
    "ie11":function (){
        console.log("這是ie11瀏覽器");
    },
    "edge":function (){
        console.log("這是edge瀏覽器");
    },
    "chrome":function (){
        console.log("這是chrome瀏覽器");
    }
});

輸出結果：