vue+iview 兼容IE11浏览器_vue video macos safari ie-程序员宅基地

技术标签: 兼容性  vue  前端  兼容IE  

最近在搞一个基于vue的后台管理系统兼容IE浏览器,眼泪都要掉下来。后来和产品说了,同意兼容IE11,感动得我眼泪啊

这里也就是记录一下我遇到的超级烦的bug

 首先是'babel-polyfill' 和 "autoprefixer-loader" 这个不用多说,资源一大堆

webpack 有 webpack-dev 不支持IE低版本了,要把 webpack 版本往下调,我是拒绝的,

然后 打包之后一直  const  去不掉,查了之后是 node_modules 里面有 const 和 let ,而编译的时候又 exclude node_modules 了,日了狗了。

还好只要IE11

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

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dongcehao/article/details/83443753

智能推荐

mysql实现自动生成学号_学校学号生成,根据班级生成-程序员宅基地

文章浏览阅读3.1k次,点赞2次,收藏8次。-- 创建班级信息表:create table xidian_class ( id int primary key auto_increment, class varchar(10), room int);-- 插入数据 insert into xidian_class values (NULL,'xd0115',207), (NULL,'xd0..._学校学号生成,根据班级生成

qemu构建嵌入式环境_嵌入式qemu-程序员宅基地

文章浏览阅读1k次。编译qemu下载qemu源码(我下的是v2.8.0,原来是想下载v5.2.0,后来发现网络连接总是配置不好,v2.8.0 configure需要>pyth2.6,且<pyth3),然后#不加 --target-list 则编译支持的所有平台, --enable-debug 允许gdb qemu./configure --enable-kvm --enable-debug --prefix=/opt/qemu --target-list="arm-softmmu x86_64-sof_嵌入式qemu

L2-025 分而治之(25 分)_7-7 分而治之 (25分) pta divide and rule-程序员宅基地

文章浏览阅读1.1k次。分而治之,各个击破是兵家常用的策略之一。在战争中,我们希望首先攻下敌方的部分城市,使其剩余的城市变成孤立无援,然后再分头各个击破。为此参谋部提供了若干打击方案。本题就请你编写程序,判断每个方案的可行性。输入格式:输入在第一行给出两个正整数 N 和 M(均不超过10000),分别为敌方城市个数(于是默认城市从 1 到 N编号)和连接两城市的通路条数。随后 M行,每行给出一条通路所连接的两个城市的编号..._7-7 分而治之 (25分) pta divide and rule

用Pyinstaller打包Scrapy项目问题解决!!!(转载)_pyinstaller keyerror: 'cache-程序员宅基地

文章浏览阅读3.5k次。使用Pyinstaller打包Scrapy项目的时候遇到各种坑,首先感谢La_vie_est_belle分享的文章,给了很大的帮助。结合他的分享我稍微整理一下。遇到的最难的坑,文末有提到。转载地址:https://blog.csdn.net/la_vie_est_belle/article/details/79017358这个是我的项目目录:众所周知,dist,build和crawl.spec是打..._pyinstaller keyerror: 'cache

图像处理——利用sort()函数对坐标进行排序_1409坐标排序-程序员宅基地

文章浏览阅读1.9k次。利用sort()函数对坐标进行排序def sorted_boxes(dt_boxes): """ Sort text boxes in order from top to bottom, left to right args: dt_boxes(array):detected text boxes with shape [4, 2] return: sorted boxes(array) with shape [4, 2] """ _1409坐标排序

WinNT.h_winnt..h-程序员宅基地

文章浏览阅读1.5w次,点赞2次,收藏10次。非常重要的一个头文件,定义了大部分windows系统里一些内部结构,收藏下来,以便翻阅.../*++ BUILD Version: 0091 Increment this if a change has global effectsCopyright (c) Microsoft Corporation. All rights reserved.Module Name:_winnt..h

随便推点

idea springboot Error: Invalid or corrupt jarfile_error: invalid or corrupt jarfile springboot-0.0.1-程序员宅基地

文章浏览阅读270次。参考链接:https://blog.csdn.net/m0_37202351/article/details/81738357_error: invalid or corrupt jarfile springboot-0.0.1-snapshot.jar

【毕业设计—DDS信号发生器】Quartus II 软件新建工程_quartus模拟电子dds信号发生器设计-程序员宅基地

文章浏览阅读983次。从今天起,做一个知识分享者。_quartus模拟电子dds信号发生器设计

df命令详解_df -i命令查看空间满了-程序员宅基地

文章浏览阅读6.7k次,点赞2次,收藏7次。◆df1.作用df命令用来检查文件系统的磁盘空间占用情况,使用权限是所有用户。2.格式df [options]3.主要参数-s:对每个Names参数只给出占用的数据块总数。-a:递归地显示指定目录中各文件及子目录中各文件占用的数据块数。若既不指定-s,也不指定-a,则只显示Names中的每一个目录及其中的各子目录所占的磁盘块数。-k:以102_df -i命令查看空间满了

【云原生】容器场景下的内核安全_容器安全, 内核安全-程序员宅基地

文章浏览阅读3.4k次,点赞46次,收藏76次。代码量跟bug的数量或者说跟漏洞的数量它是成正比的,代码量越多,它的bug漏洞数目也会越大,所以这是Linux内核的一些现状。在最近一些年,它里面的bug数量每年都超过125,这都是Linux内核里边可以被利用的bug数量,代码量巨大就会导致新的漏洞,所以软件漏洞无法避免,这些软件漏洞往往会被攻击者利用,这就会产生新型的攻击。..._容器安全, 内核安全

基于VMware的虚拟Linux集群搭建-lvs+keepalived_esxi虚拟机keeplive-程序员宅基地

文章浏览阅读1w次。基于Vmare的虚拟Linux集群搭建-lvs+keepalived,详细的配置过程_esxi虚拟机keeplive

Django——基本流程_django处理流程-程序员宅基地

文章浏览阅读261次。配置数据库django默认使用的是sqlite数据库在_init_.py中写入:import pymysqlpymysql.install_as_MySQLdb()在settings.py的DATABASES中进行数据库配置:ENGINE:设置数据库为mysql数据库NAME:数据库名USER:登录数据库的用户名PASSWORD:登录数据库的密码HOST:数据库服务器ipPORT:端口(3306为mysql的默认端口)创建应用在一个项目中可以创建多个应用,一个应用对_django处理流程

推荐文章

热门文章

相关标签