最近在搞一个基于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.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函数中,需要判断 当前浏览器,然后加上 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 = 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
vue+iview 兼容IE11浏览器的实现方法
- Author -
dongceha声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@