欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-10-06 17:20:15
最近在搞一个基于vue的后台管理系统兼容ie浏览器,眼泪都要掉下来。后来和产品说了,同意兼容ie11,感动得我眼泪啊 这里也就是记录一下我遇到的超级烦的bug &nbs...

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

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