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 相关文章推荐
js函数的引用, 关于内存的开销
Sep 17 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
详解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
一些星际专用术语解释
2020/03/04 星际争霸
php 网上商城促销设计实例代码
2012/02/17 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
python求列表交集的方法汇总
2014/11/10 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python常用算法学习基础教程
2017/04/13 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
pytorch masked_fill报错的解决
2020/02/18 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
金融专业个人求职信范文
2013/11/28 职场文书
社区包粽子活动方案
2014/01/21 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
关于分班的感言
2015/08/04 职场文书