vue+iview兼容IE11浏览器的实现⽅法
最近在搞⼀个基于vue的后台管理系统兼容IE浏览器，眼泪都要掉下来。后来和产品说了，同意兼容IE11，感动得我眼泪啊
这⾥也就是记录⼀下我遇到的超级烦的bug
⾸先是'babel-polyfill' 和 "autoprefixer-loader" 这个不⽤多说，资源⼀⼤堆
然后打包之后⼀直  const  去不掉，查了之后是 webpack 有 webpack-dev 不⽀持IE低版本了，要把 webpack 版本往下调，我是拒绝的
1、IE  new Date() 失败
new Date('2018-1-1')
//Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)  chrome
//Invalid Date                  IE
new 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.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
僵持住了，还是我这边改吧
quest.use(
config => {
// 给每个请求加上⼀个 ieT 的时间参数
if (window.navigator.userAgent.indexOf('Trident') > -1) {
config.url = config.url + `?ieT=${new Date().getTime()}`
}
return config;
},
err => {
ject(err);
});
7、本系统使⽤了 tinymce 来进⾏富⽂本编辑，但是，初始化失败⽽且不报错
这⾥使⽤tingmce只是导⼊了  tinymce⼀个⽂件，其他⽂件都放进了 dist ⽂件夹之中，然后让他⾃⼰去读取⽂件
input标签placeholder属性不知道为什么⽹上⼀点资源都没有，难道全世界就我⼀个⼈碰到了？可是这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 +
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 () {
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
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 = Absolute(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 = ateElement('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 = Data("Text");
this.filters.phoneNum = this.filters.phoneNum ?
this.filters.phoneNum + place(/[\r\n]/g,"") :
}
},
...
还有好多，但是就不⼀⼀讲了，其他的应该能查到，byebye
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。