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 相关文章推荐
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
PHP中常用数组处理方法实例分析
2008/08/30 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
javascript一点特殊用法
2008/05/28 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
js对象基础实例分析
2015/01/13 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
2018/11/06 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
python爬取音频下载的示例代码
2020/10/19 Python
详解python的变量缓存机制
2021/01/24 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
开工庆典邀请函范文
2014/01/16 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
详解nginx进程锁的实现
2021/06/14 Servers