2202年了还让我兼容IE8

AuraVic

已于 2022-09-04 16:59:16 修改

阅读量398

点赞数

分类专栏： web前端经验分享文章标签： javascript 前端开发语言

于 2022-08-17 00:11:43 首次发布

本文链接：https://blog.csdn.net/AruaVic/article/details/126129899

版权

web前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

经验分享

4 篇文章 0 订阅

订阅专栏

1、项目背景：

让我做一个POC的demo小页面，需要兼容IE8、IE9，做的我心好痛，测试也不太方便测试，只能用老版本的IE浏览器来开启IE8、IE9的模拟器来测试。

使用jquery+bootstrap来搭建项目框架
jquery 要使用 version 1.12.4左右的版本(只能用1.**的版本)
bootstrap使用的是 v3.3.7 的版本

注意：

IE8 不支持 es6 的写法，一切es6以上的语法统统要丢掉；
IE8 不支持CSS3的写法，所以在使用bootstrap时需要 html5shiv.min.js、respond.min.js；

html5shiv： 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
respond.min： 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，故这两种方案还是需要的，

下面是两个解决方法的cdn地址写法：

<!--[if lt IE 9]>
　　<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
 　　<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>

2、日期控件 jedate.js

使用方法

<!-- html部分 -->
<div class="col-md-4 form-group">
	<label for="date" class="control-label">日期</label>
	<input class="form-control" value="" id="date" type="text" />
</div>

// js部分
// 初始化日期
+ function () {
    // 日历
    jeDate({
        dateCell: "#date",//isinitVal:true,
        format: "YYYY-MM-DD",//设置日期格式
        isTime: false, //isClear:false,
        minDate: "2014-09-19 00:00:00",//设置最小时间
    });
}();
// 最后取值 直接使用 $("#date").val() 即可。

// 如果有两个控件【开始时间、结束时间】需要做前后时间校验，可使用以下函数
$("#date").blur(function () {
    setTimeout(function () {
        if ($("#date").val()) {
            jeDate({
                dateCell: "#date",//isinitVal:true,
                format: "YYYY-MM-DD",//设置日期格式
                isTime: false, //isClear:false,
                minDate: $("#date1").val() + " 00:00:00",//设置最小时间
            });
        } else {
            jeDate({
                dateCell: "#date1",//isinitVal:true,
                format: "YYYY-MM-DD",//设置日期格式
                isTime: false, //isClear:false,
                minDate: "2014-09-19 00:00:00",//设置最小时间
            });
        }
    }, 300)
})

3、ajax请求

3.1、兼容 IE8 ajax 发请求报错的问题

点击IE浏览器的的“工具->Internet 选项->安全->自定义级别”，将“其他”选项中的“通过域访问数据源”选中为“启用”或者“提示”，点击确定就可以了。

3.2、兼容 IE8 上传文件失败的问题

就需要将 IE中 – 工具 – internet选项 – 安全 – 自定义级别
对未标记为可安全执行脚本的activex控件初始化并执行脚本(不安全) 设置为启用

3.3、原生ajax post请求

function createXmlHttp() {
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            alert("浏览器不支持");
        }
    }
    return xmlHttp;
};
var datas = { parentNum: "IndustryTypeCode" }
var xmlHttp = createXmlHttp();
xmlHttp.open("post", "http://172.16.80.10:28096/cominfo/getDic");
// 要使用这两句话，即可使用表单提交
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send("parentNum=IndustryTypeCode")
xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        console.log(JSON.parse(xmlHttp.responseText));
    }
};

jQuery.support.cors = true; // IE10+
var xhr = $.ajax({
    type: 'GET',
    url: 'https://baconipsum.com/api/?type=meat-and-filler&format=json',
    dataType: 'json',
    crossDomain: true == !(document.all), // 兼容 IE8,9 
    success: function (res) {
        console.log('xhr success', res)
    },
    error: function (err) {
        console.log('xhr err', err)
    }
});
console.log('demo.html--------', xhr);

4、IE8 如何支持多文件上传？

form 中 multiple 属性对于IE8和IE9来说无效，所以我们应该换一种方式进行上传：给用户添加一个按钮为添加文件按钮，用户点击添加文件按钮后，我们使用js给表单中插入一个input为file的标签：

<input type="file" name="file_0" id="file_0" style="float: left;">

完整代码：

<!-- html -->
<div id="ie8UploadForm" class="ie8Form">
	<button id="appendFile" class="appendFileBtn">追加文件</button>
	<form enctype="multipart/form-data" method="POST" action="http://192.168.161.169:28096/cominfo/upload" id="uploadForm">
		<input type="text" name="projNum" id="uploadId" value="" style="display: none;">
		<div class="fileBox" id="0">
			<a style="float: left;" onclick="deleteDiv(0)" class="deleteFile">×</a>
			<input type="file" name="file_0" id="file_0" style="float: left;">
		</div>
	</form>
	<button id="ie8upload">提交</button>
	<button id="clearFile" class="appendFileBtn">清空文件</button>
</div>

// js
var FILECOUNT = 1;
$("#appendFile").click(function name() {
    var htmLtemp = '<div class="fileBox" id="' + FILECOUNT + '">'
    htmLtemp += '<a style="float: left;" flag="' + FILECOUNT + '" class="deleteFile" οnclick="deleteDiv(' + FILECOUNT + ')">×</a>'
    htmLtemp += '<input type="file" name="file_' + FILECOUNT + '" id="file_' + FILECOUNT + '">'
    htmLtemp += '</div>'

    $("#uploadForm").append(htmLtemp)
    FILECOUNT++;
})

// 删除方法
function deleteDiv(event) {
    console.log('event', event)
    var removeChild = document.getElementById(event)
    document.getElementById("uploadForm").removeChild(removeChild);
}
$("#clearFile").click(function (params) {
    clearUploadBox()
})
function clearUploadBox() {
    FILECOUNT = 1;
    var html = '<input type="text" name="projNum" id="uploadId" value="" style="display: none;">'
    html += '<div class="fileBox" id="0">'
    html += '<a style="float: left;" οnclick="deleteDiv(0)" class="deleteFile">×</a>'
    html += '<input type="file" name="file_0" id="file_0" style="float: left;">'
    html += '</div>'
    $("#uploadForm").html(html);
    $("#uploadId").val($("#projNum").val());// 初始化项目编号
}

5、判断浏览器版本

+ function name(params) {
    var res = IEVersion()
    // console.log('什么浏览器', res)
    // 根据浏览器版本，渲染对应的文件上传组件
    if (res == '8' || res == '9') {
        $("#Upload").css("display", "none")
        $("#ie8UploadForm").css("display", "block")
    } else {
        $("#Upload").css("display", "block")
        $("#ie8UploadForm").css("display", "none")
    }
}()

// 判断是否为IE浏览器
function IEVersion() {
    var isOpera = navigator.userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
    var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
    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 if (fIEVersion == 11) {
            return "11";
        }
        else {
            return "0"
        }//IE版本过低
    }
    else if (isEdge) {
        return "Edge";
    }
    else {
        return "-1";//非IE
    }
}

6、IE8、IE9 如何遍历对象？

遍历对象我们可以使用ES6的 Object.keys、for-in方法，可惜IE8不支持，所以我们要使用object 上原型对象上的方法来对属性遍历 Object.getOwnPropertyNames()
如果你想要得到所有实例属性，无论它是否可枚举，都可以使用Object.getOwnPropertyNames()方法。

7、代码压缩

因为项目在客户端的控制台上，完全可以查看源码，所以很多逻辑公之于众后比较不太安全，所以需要加密。但是整个项目没有使用webpack，则选择了手动压缩代码。但js文件各种嵌套，变量名没有办法真实压缩；所以使用了以下代码压缩的方法：
1、代码压缩工具网址http://dean.edwards.name/packer/；
2、必须要格式化代码，每行代码结束后都需要添加分号；然后一个文件一个文件在上方地址工具中压缩代码；
3、项目支队js下的【index.js、affirm.js、calculate.js、common.js、firstPage.js】文件进行压缩，压缩后保存到dist目录下，文件名中间添加.min.js即可；
4、项目在调试过程中引用js下的未压缩代码，上线要换成压缩代码；
5、上线后只给服务器提供压缩版本代码，源码不给提供。