IE8各种兼容问题梳理总结，IE8+LAYUI+JS等[持续更新]

无力吐槽！现在还在用IE8的简直就是反人类。

IE8不支持js中的map方法

错误描述:

　　使用layui的穿梭框，在获取右边已选数据时，使用map方法把对象数据转换为数组

                //获取穿梭框右侧已选中数据

                var getTransferData = transfer.getData('department');

                var transferList = new Array();

     　　　getTransferData.map(function(item){        　　//map方法报错

                    transferList.push(item.value);

                });

解决方法1(亲自实践)：

　　使用for循环把对象中的数据循环加入数组，放弃使用map方法

　　　　for(var i=0;i<getTransferData.length;i++)

             　　   {

                　　    transferList.push(getTransferData[i].value);

              　　  }

解决方法2(未实践)：

修改IE不兼容MAP()的问题,自定义实现JavaScript的Map对象

由于IE8及以下版本不支持Map对象，本文为程序猿们提供了有效的解决方法。

本文重写了Map对象，实现了常用的set, get, put, clear, remove, delete, forEach, has, containsKey, isEmpty, size 等方法，使用和声明的方试和正常声明Map对象一样：

var map = new Map();

只需将下面代码拷入<script type="text/javascript"></script>中即可。

实现Map对象的代码如下，未亲自实践，仅供参考：

 ckeditor-init.js报错

问题描述：

　　if (document.readyState != 'loading' && document.body) {
　　　　document.addEventListener('DOMContentLoaded', initialiseCKEditor);   //显示报错代码
　　　　runInitialisers();
　　} else {
　　　　document.addEventListener('DOMContentLoaded', runInitialisers);
　　}

解决方法：

　　没找到好的解决方法，直接把这个js引用注释掉，只留ckeditor.js，可以继续工作-_-||

　　<!--<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>-->
　　<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

 上传弹出下载框

错误描述：

　　上传文件用json返回数据给前端时，IE8无法处理，会弹出下载框。

解决方法：

　　在服务器端设置response文本格式为“text/html”，django方法如下。项目中使用ajax+iframe实现文件上传，在代码写在iframe的后台处理代码/upload/中。

　　　　return HttpResponse(json.dumps(ret),content_type='text/html') 

　　可能存在需要前端重新用json格式编码问题，未实践。

remove()不兼容IE的解决办法

错误描述：IE8 remove() 对象不支持此属性或方法

解决方法：

　　1.定义方法判断浏览器　

/**
 * 判断是否是IE
 * @returns boolean
 */
function isIE() {
    if (!!window.ActiveXobject || "ActiveXObject" in window) {
        return true;
    } else {
        return false;
    }
}
/**
 * 判断是否是IE11
 * @returns boolean
 */
function isIE11(){
    if((/Trident\/7\./).test(navigator.userAgent)) {
        return true;
    } else {
        return false;
    }
}

　　2.判断是否是IE选择不同的方法

// 判断是否是IE
if (isIE() || isIE11()) {
    $("#videoFileTable tr").get(1).removeNode(true);
} else {
    $("#videoFileTable tr").get(1).remove();
}

　　3.多个元素时循环删除

// 获取除了第一个tr标签
var trObj = $("#videoFileTable tr").not(":eq(0)");
// 循环
for(var i = 0; i < trObj.length; i++) {
    // console.log(trObj[i]);
    trObj[i].removeNode(true);
}

IE8中不支持classList方法的解决

　　1.无法使用classList[0]的解决方法　　

　　//监听表单中所有开关
　　form.on('switch()', function(data){
   　　 var id = data.elem.id;
    　　console.log($('#' + id).next().contents());
    　　console.log($('#' + id).next()[0].className.split(" ")[2]);  //兼容IE8
    　　//return;
    　　var a = $('#' + id).next()[0].className.split(" ")[2];  //兼容IE8
   　　// var a = $('#' + id ).next()[0].classList[2]; //$('#1' ).next()[0].classList[2]   不兼容IE8，此句报错
　　 使用className变相解决此问题，网上有ie8兼容classList代码，但是和此处问题不符合，兼容代码解决了classList下几个方法的使用，但是没有涉及数组取数问题。
　　　高手也可以自己根据网上的代码自己扩充，链接如下
　　　https://blog.csdn.net/weixin_42413684/article/details/80812754