vue+iview 兼容IE11浏览器的实现方法


Posted in Javascript onJanuary 07, 2019

最近在搞一个基于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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 #Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 #Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 #Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 #Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 #jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 #jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 #jQuery
You might like
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
微信红包随机生成算法php版
2016/07/21 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
php实现微信扫码支付
2017/03/26 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
js实现筛选功能
2020/11/24 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python将list转为matrix的方法
2018/12/12 Python
python实现图片压缩代码实例
2019/08/12 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
pyspark 随机森林的实现
2020/04/24 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
应聘教师自荐信
2013/10/12 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
授权委托书样本
2014/09/25 职场文书
实习生个人总结范文
2015/02/28 职场文书
个性与发展自我评价
2015/03/06 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
初中政治教师教学反思
2016/02/23 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电