vue+iview 兼容IE11浏览器

最近在搞一个基于vue的后台管理系统兼容IE浏览器，眼泪都要掉下来。后来和产品说了，同意兼容IE11，感动得我眼泪啊

这里也就是记录一下我遇到的超级烦的bug

首先是'babel-polyfill' 和 "autoprefixer-loader" 这个不用多说，资源一大堆

webpack 有 webpack-dev 不支持IE低版本了，要把 webpack 版本往下调，我是拒绝的,

然后打包之后一直 const 去不掉，查了之后是 node_modules 里面有 const 和 let ，而编译的时候又 exclude node_modules 了，日了狗了。

还好只要IE11

1、IE new Date() 失败

new Date('2018-1-1')
//Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)   chrome
//Invalid Date                                      IEnew Date('2018/1/1')
//Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)   chrome
//Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)   IE

2、在IE里，点击 input type=checkbox 多次点击会逻辑混乱

原因：在 IE中，多次点击之后会同时出发 dblclick 和 click 事件，而这两个事件是一起执行了 click 事件，会导致click 事件失效

$("input[type='checkbox']").attr('ondblclick', 'this.click()');或$('.content').on('dblclick','input[type="checkbox"]',function(){this.click();   //  把双击事件变成单击事件
})
注意，要判断是否是IE浏览器，要不然会把chrome 带进沟里

3、input placeholder 会触发 input 事件

意思就是说你渲染上去了，可能会自动触发一次 input，然后清空了文本，又触发一次

重点是，IE tm 的不要脸地承认了！！说不影响安全，俺们就不修复了哈

这东西的兼容就见仁见智了，用span 来代替 placeholder 也是可以的嘛，不多哔哔

4、Input type=file 中，将其置空清除缓存会在IE中触发 change 事件，

var fileName = $(this).val();
filename == undefined

这东西的兼容就见仁见智了，可以判断一下filename，不多哔哔

5、input type=text 中，text-overflow: ellpsis失效

input输入框如果东西太多，希望展示位 ... 省略号，但是chrome成功了，IE失败了

需要将 input 标签置为 readonly 才能起作用没错，这东西是 iview select 里的 input标签
So:
initTheSelect () {var input = document.querySelector('.ellipsisInput .ivu-select-selection .ivu-select-input');input.setAttribute('readonly', true);input.addEventListener('click', function (params) {input.removeAttribute('readonly');input.focus()});input.addEventListener('blur', function (params) {input.setAttribute('readonly', true);})
},

6、在IE中，本系统是使用了cookie 来保存验证信息的，但是没多久就能发现发送的请求都不携带cookie而导致重新登录

查看了，是304 即读取缓存的时候，不会携带cookie，然后一旦读到一个重新登录，你这个系统基本就完了，一直从缓存里读取，你登录了？诶，有缓存，我拿缓存吧。

缓存：咳咳，你不是上次重新登陆吗？我给你存着呢，给给给，重新登录去吧。

所以要么设置IE不缓存，要么代码改

 后端设置，前端的设置要么不保险(神tm时灵时不灵)，要么就是太麻烦，后端几行代码搞定
不允许浏览器端或缓存服务器缓存当前页面信息。
response.setHeader( "Pragma", "no-cache" );
response.setDateHeader("Expires", 0);
response.addHeader( "Cache-Control", "no-cache" );//浏览器和缓存服务器都不应该缓存页面信息
response.addHeader( "Cache-Control", "no-store" );//请求和响应的信息都不应该被存储在对方的磁盘系统中；
response.addHeader( "Cache-Control", "must-revalidate" );*//于客户机的每次请求，代理服务器必须想服务器验证缓存是否过时；

2018-11-14

僵持住了，还是我这边改吧

axios.interceptors.request.use(config => {// 给每个请求加上一个 ieT 的时间参数if (window.navigator.userAgent.indexOf('Trident') > -1) {config.url = config.url + `?ieT=${new Date().getTime()}`}return config;},err => {return Promise.reject(err);});

7、本系统使用了 tinymce 来进行富文本编辑，但是，初始化失败！！！而且不报错！！！

这里使用tingmce只是导入了 tinymce一个文件，其他文件都放进了 dist 文件夹之中，然后让他自己去读取文件

不知道为什么网上一点资源都没有，难道全世界就我一个人碰到了？可是这bug我去其他系统上必现的呀，老哥

Tinymce.js

这bug困扰了我整整两天！！一行一行在IE里面debug，对比chrome里的debug终于有结果了
是tinymce在IE中的基本路径表现和chrome不一致，改源码
Tinymce.js
var load = function (name, addOnUrl, success, scope, failure) {if (urls[name]) {return;
}
var urlString = typeof addOnUrl === 'string' ? addOnUrl : addOnUrl.prefix + addOnUrl.resource + addOnUrl.suffix;if (urlString.indexOf('/') !== 0 && urlString.indexOf('://') === -1) {// 兼容IE 浏览器// 在load函数中，需要判断 当前浏览器，然后加上 disturlString = AddOnManager.baseURL + 'dist/' + urlString;console.log(urlString)}urls[name] = urlString.substring(0, urlString.lastIndexOf('/'));if (lookup[name]) {loadDependencies(name, addOnUrl, success, scope);} else {ScriptLoader.ScriptLoader.add(urlString, function () {return loadDependencies(name, addOnUrl, success, scope);}, scope, failure);}
};var loadLanguage = function (scriptLoader, editor) {var settings = editor.settings;if (settings.language && settings.language !== 'en' && !settings.language_url) {// 兼容IE浏览器if (window.navigator.userAgent.indexOf('Trident') > 0) {settings.language_url = editor.editorManager.baseURL + '/dist/langs/' + settings.language + '.js';} else {settings.language_url = editor.editorManager.baseURL + '/langs/' + settings.language  + '.js';}}if (settings.language_url && !editor.editorManager.i18n.data[settings.language]) {scriptLoader.add(settings.language_url);}
};

Theme.js

Theme.js
var getSkinUrl = function (editor) {var settings = editor.settings;var skin = settings.skin;var skinUrl = settings.skin_url;if (skin !== false) {var skinName = skin ? skin : 'lightgray';if (skinUrl) {skinUrl = editor.documentBaseURI.toAbsolute(skinUrl);} else {// 兼容IE 浏览器if (window.navigator.userAgent.indexOf('Trident') > 0) {skinUrl = EditorManager.baseURL + '/dist/skins/' + skinName;} else {skinUrl = EditorManager.baseURL + '/skins/' + skinName;}}}return skinUrl;
};

8、导出excel文件

其实我是倾向于使用 iview 自带的 exportCsv 的，但是其

不会执行 columns 里的render、

导出的数字 0002 打开会变成 2

。。。

很多问题，没办法，这个文件天生的，避免不了

IE 的话，又不兼容 download属性、我的系统又说什么阻止了正向与反向缓存什么的，点进去还蛮多符合的东西的，结果window.href 也gg，只能使用 msSaveBlob 了

// 兼容IE
if (window.navigator.msSaveOrOpenBlob) {const blob = new Blob([template], {type: "application/vnd.ms-excel"})navigator.msSaveBlob(blob, this.name.indexOf('xls') > 0 ? this.name : this.name + '.xls');
} else {let link = document.createElement('a');link.href = uri + this.base64(template);link.download = this.name.indexOf('xls') > 0 ? this.name : this.name + '.xls';link.click();
}

9、复制粘贴失效！？

测试和我说复制粘贴失效了，我整个人差点爆炸！

冷静一点...

分析一下：在IE中，复制之后会将回车复制进去，然后黏贴到input标签时，只展示第一行

//监听 paste事件
MyPaste () {if (window.navigator.userAgent.indexOf('Trident') > 0) { var copyText = window.clipboardData.getData("Text");this.filters.phoneNum = this.filters.phoneNum ? this.filters.phoneNum + copyText.replace(/[\r\n]/g,"") :copyText.replace(/[\r\n]/g,"");}
},

...

还有好多，但是就不一一讲了，其他的应该能查到，byebye