vue+iview 兼容IE11浏览器的实现方法
最近在搞一个基于vue的后台管理系统兼容IE浏览器，眼泪都要掉下来。后来和产品说了，同意兼容IE11，感动得我眼泪啊
这里也就是记录一下我遇到的超级烦的bug
首先是'babel-polyfill'和 "autoprefixer-loader"这个不用多说，资源一大堆
然后打包之后一直 const 去不掉，查了之后是webpack有webpack-dev不支持IE低版本了，要把webpack版本往下调，我是拒绝的
1、IE newDate()失败
newDate('2018-1-1')
//MonJan01201800:00:00GMT+0800(中国标准时间)chrome
//InvalidDateIE
newDate('2018/1/1')
//MonJan01201800:00:00GMT+0800(中国标准时间)chrome
//MonJan01201800:00:00GMT+0800(中国标准时间)IE
2、在IE里，点击inputtype=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、inputplaceholder会触发input事件
意思就是说你渲染上去了，可能会自动触发一次input，然后清空了文本，又触发一次
重点是，IEtm的不要脸地承认了！！说不影响安全，俺们就不修复了哈
这东西的兼容就见仁见智了，用span来代替placeholder也是可以的嘛，不多哔哔
4、Inputtype=file中，将其置空清除缓存会在IE中触发change事件，
varfileName=$(this).val(); filename==undefined
这东西的兼容就见仁见智了，可以判断一下filename，不多哔哔
5、inputtype=text中，text-overflow:ellpsis失效
input输入框如果东西太多，希望展示位 ... 省略号，但是chrome成功了，IE失败了
需要将input标签置为readonly才能起作用
没错，这东西是iviewselect里的input标签
So:
initTheSelect(){
varinput=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=${newDate().getTime()}`
}
returnconfig;
},
err=>{
returnPromise.reject(err);
});
7、本系统使用了tinymce来进行富文本编辑，但是，初始化失败！！！而且不报错！！！
这里使用tingmce只是导入了 tinymce一个文件，其他文件都放进了dist文件夹之中，然后让他自己去读取文件
不知道为什么网上一点资源都没有，难道全世界就我一个人碰到了？可是这bug我去其他系统上必现的呀，老哥
Tinymce.js
这bug困扰了我整整两天！！一行一行在IE里面debug，对比chrome里的debug终于有结果了
是tinymce在IE中的基本路径表现和chrome不一致，改源码
Tinymce.js
varload=function(name,addOnUrl,success,scope,failure){
if(urls[name]){
return;
}
varurlString=typeofaddOnUrl==='string'?addOnUrl:addOnUrl.prefix+
addOnUrl.resource+addOnUrl.suffix;
if(urlString.indexOf('/')!==0&&urlString.indexOf('://')===-1){
//兼容IE浏览器
//在load函数中，需要判断当前浏览器，然后加上dist
urlString=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(){
returnloadDependencies(name,addOnUrl,success,scope);
},scope,failure);
}
};
varloadLanguage=function(scriptLoader,editor){
varsettings=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
vargetSkinUrl=function(editor){
varsettings=editor.settings;
varskin=settings.skin;
varskinUrl=settings.skin_url;
if(skin!==false){
varskinName=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;
}
}
}
returnskinUrl;
};
8、导出excel文件
其实我是倾向于使用iview自带的exportCsv的，但是其
不会执行columns里的render、
导出的数字0002打开会变成2
。。。
很多问题，没办法，这个文件天生的，避免不了
IE的话，又不兼容download属性、我的系统又说什么阻止了正向与反向缓存什么的，点进去还蛮多符合的东西的，结果window.href也gg，只能使用msSaveBlob了
//兼容IE
if(window.navigator.msSaveOrOpenBlob){
constblob=newBlob([template],{type:"application/vnd.ms-excel"})
navigator.msSaveBlob(blob,this.name.indexOf('xls')>0?this.name:this.name+
'.xls');
}else{
letlink=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){
varcopyText=window.clipboardData.getData("Text");
this.filters.phoneNum=this.filters.phoneNum?
this.filters.phoneNum+copyText.replace(/[\r\n]/g,""):
copyText.replace(/[\r\n]/g,"");
}
},
...
还有好多，但是就不一一讲了，其他的应该能查到，byebye
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。