网站适配IE浏览器的几个注意事项

网站适配IE浏览器的几个注意事项

1、ajax请求date数据格式:

错误示范

$.ajax({
        url: 'url',
        type: 'POST',
        data: {
            data: "data",
        },
        success: function (e) {
        }        
})

正确示范(最后一个date值不能有“，”)

$.ajax({
       url: 'url',
       type: 'POST',
       data: {
           data: "data"
       },
       success: function (e) {
       }        
})

2、部分js插件需要引入对应的js文件才能生效

例如：sweetalert弹框插件，在IE浏览器正常运行，需要引入promise.auto.js,在chorme浏览器则不需要
IE正常使用该插件有两种方法：
1、cdn地址：https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.js
2、以下代码不会与IE11一起运行：

swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!'
}).then((result) => {
   if (result.value) {
     swal(
       'Deleted!',
       'Your file has been deleted.',
       'success'
     )
   }
})

解决此问题的简单方法是使用 function() 语法而不是 () =>

swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!'
}).then(function(result) {
   if (result.value) {
     swal(
       'Deleted!',
       'Your file has been deleted.',
       'success'
     )
   }
})

2、判断不同浏览器内核后使用对应的方法

var ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
	ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),
    ieEDGE = navigator.userAgent.match(/Edge/g),
    ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));
    console.log('excelFileie:' + ie);
    console.log('excelFileieVer:' + ieVer);
    if (ie && ieVer < 10) {
        this.message.error('No blobs on IE<10');
        return;
    }
    if (ieVer > -1) {
    //IE
    } else {
	//chorme
	}

2、IE浏览器常见报错

1）、无效字符：

原本是：

`string text ${expression} string text`

修改为

"string text "+expression+" string text"

2）、js导出excel文件，传递给系统调用的数据区域太小：

IE浏览器对URL的最大限制为2083个字符，如果超过这个数字，提交按钮没有任何反应。

function downloadFile(title, data) {
		        const blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;'});
		        const ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
		            ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),
		            ieEDGE = navigator.userAgent.match(/Edge/g),
		            ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));
		        console.log('ie:' + ie);
		        console.log('ieVer:' + ieVer);
		        if (ie && ieVer < 10) {
		            this.message.error('No blobs on IE<10');
		            return;
		        }
		        if (ieVer > -1) {
		            window.navigator.msSaveBlob(blob, title);
		        } else {
		            const url = window.URL.createObjectURL(blob);
		            let link = document.createElement('a');
		            link.setAttribute('href', url);
		            link.setAttribute('download', title);
		            document.body.appendChild(link);
		            link.click();
		            document.body.removeChild(link);
		        }
		    }

3）、InvalidCharacterError

//创建HTML元素的js代码， 例如ajaxfileupload.js, 行10 字符17代码：

var io = document.createElement("<iframe id='" + frameId + "' name='" + frameId + "' />");
//以上代码在IE10下报如下错误：
//SCRIPT5022: InvalidCharacterError
//解决办法，改成如下兼容写法：
var io=document.createElement("iframe");
io.id=frameId;
io.name=frameId;
//以上代码出至  ajaxfileupload.js, 行10 字符17  使用ajaxfileupload.js需把此行更改成上面那样，才能在IE10正常运行。