IE兼容性踩坑
IE8-时间格式问题
new Date()不支持传入中划线格式的字符
跟小程序一样的bug，如下就会报错
new Date('2020-01-01')
解决办法，替换成2020/01/01的形式就好了
new Date('2020-01-01').replace(/-/g, "/"));
IE8-ajax问题
跨域cors不支持
该版本浏览不支持cors协议，导致出错，但是本身并不会抛异常和错误。所以排查起来比较难发现。
一般会直接进入错误回调内，将其错误结果序列化后 得到提示错误如下：
# No transport
解决办法有很多
- 不适用cors方式处理跨域，比如jsonp或nginx反向代理等
- 引入一个专门处理此问题的库
jQuery-ajaxTransport-XDomainRequest放在公共位置 - 打开juery对cors的额外支持
jQuery.support.cors = true;（我是用的这种办法）
如上配置，可能还不行
{"readyState":0,"status":0,"statusText":"TypeError: \\u62d2\\u7edd\\u8bbf\\u95ee\\u3002\\r\\n"}
unicode转为中文后即“拒绝访问”。
如何解决呢？答案是不好解决，需要手动设置浏览器的菜单如下：
点击IE浏览器的的“工具->Internet 选项->安全->自定义级别”将“其他”选项中的“通过域访问数据源”选中为“启用”或者“提示”，点击确定就可以
但是这样用户体验不够好，所以，最好还是用其它方案来解决跨域，如nginx反向代理
IE8-layui.upload问题
上传，却弹下载弹窗
其他浏览器表现正常，ie8下也会上传成功，但是接收到后端上传成功的响应后，马上就弹出了个保存文件的弹窗。
经过排查，是ie 8不支持响应头类型为 application/json的问题。
他会误认为是个文件，让你下载保存
解决办法，后端设置为响应类型为text/ html即可
IE8-console不支持
包括的浏览器为ie6\ie7\ie8都不支持。
比如代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str = 123;
console.log(str);
document.write('没有bug,顺利到此')
</script>
</body>
</html>;
部分浏览器对console语句的脚本错误隐藏信息如下：
有些情况可能不会弹窗报错，但是页面没有任何数据，和预期不符，
但是打开控制台就恢复正常（诡异之处Max！！！），也要考虑是这种情况。
解决办法如下：
1、删除所有console即可
2、如果不想删除，依然想使用，可以尝试加入如下代码
window.console = window.console || (function () {
var c ={};
c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile= c.clear = c.exception = c.trace = c.assert = function(){};
return c;
})();
IE11-如何兼容新语法
方案1
项目依靠webpack处理（本质上是babel来处理）
配置文件将编译的目标对象设置为ie11或其他
方案2
如果项目是传统的项目，做的是后期适配工作。那么再使用webpack去编译，
就比较繁琐。
可以使用官方另一种做法（性能要低于本地编译）
- 在公共部分，引入垫片库
polyfill.min.js - 在公共部分，引入babel在线编译库
@babel/standalone/babel.min.js - 给不兼容的js脚本声明处添加
<script type="text/babrl">
IE11-特殊情况
不支持Proxy对象
实际上，有相当一部分新的es规定的内置对象他都不支持，为甚单独提它。
因为其它不支持的对象可以通过polyfill的方实使其支持。
但是这个类（对象）老版浏览无法通过旧es5语法来模拟
所有可能，请避免使用此对象
IE11-ajax/axios请求
get的url含中文会乱码
比如一下代码：
const url = 'https://www.xxx.com?uname='+'张三'
打开ie11控制台>网络，查看url地址会发现已经出现乱码了：
请求 URL: https://www.xxx.com?uname=å½äºäºº
解决办法如下：
let url = 'https://www.xxx.com?uname='+'张三';
url = encodeURI(url);
get请求会走缓存
如果你发送的接口已经被请求过，而且参数一样，那么ie11会走缓存，不会再次真的发起请求(get多发生)。
这个缓存不是你设定的，而是ie11浏览器的特性（bug），可以通过传递一个每次都不一样的参数，让其重新发送请求，比如时间戳
// axios请求前拦截
axios.interceptors.request.use((conf) => {
conf.params['_t'] = new Date()
return conf;
});
IE兼容性踩坑的更多相关文章
- vue项目移植tinymce踩坑
转载:https://segmentfault.com/a/1190000012791569?utm_source=tag-newest 2019-2-18 貌似这篇文章帮了大家一些小忙最近tinym ...
- html2canvas的踩坑之路
html2canvas的踩坑之路 前言 早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品 ...
- 首个hybird商业项目踩坑总结
该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...
- TiDB 深度实践之旅--真实“踩坑”经历
美团点评 TiDB 深度实践之旅(9000 字长文 / 真实“踩坑”经历) 4 PingCAP · 154 天前 · 3956 次点击 这是一个创建于 154 天前的主题,其中的信息可能已经有所发 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- Microsoft SQL Server on Linux 踩坑指南
微软用 SQL Server 在 2016 年的时候搞了一个大新闻,宣传 Microsoft ❤️ Linux 打得一众软粉措手不及.但是这还是好事情,Linux 上也有好用的 SQL Server ...
- weex踩坑记录
weex框架样式问题--我暂时使用最基本的样式css,weex前端开发的话web端会显示各种的html标签.写出的样式也都会显示的很好,但是在app端的话,就没有很好的兼容性,只是支持文档中的一些标签 ...
- Date()日期函数浏览器兼容问题踩坑
原文:Date()日期函数浏览器兼容问题踩坑 之前用layui做的一项目中,table中用到了日期格式化的问题.直接没多想,撸代码就完了呗,结果最近一段时间客户反馈说显示日期跟录入日期不一样(显示日期 ...
- apicloud踩坑集锦
最近在用apicloud开发,这里录入一些踩坑的地方,从头到尾,要多尴尬有多尴尬,新入app开发,记录一些心得,和遇到的坑以及解决办法. 1,apicloud 打包的Android app ,打开fr ...
- 一次flume exec source采集日志到kafka因为单条日志数据非常大同步失败的踩坑带来的思考
本次遇到的问题描述,日志采集同步时,当单条日志(日志文件中一行日志)超过2M大小,数据无法采集同步到kafka,分析后,共踩到如下几个坑.1.flume采集时,通过shell+EXEC(tail -F ...
随机推荐
- 如何使用Nacos作为配置中心统一管理配置
如何使用Nacos作为配置中心统一管理配置 1).引入依赖, <dependency> <groupId>com.alibaba.cloud</groupId> & ...
- 基于OpenCV与PyTorch的智能相册分类器全栈实现教程
引言:为什么需要智能相册分类器? 在数字影像爆炸的时代,每个人的相册都存储着数千张未整理的照片.手动分类不仅耗时,还容易遗漏重要瞬间.本文将手把手教你构建一个基于深度学习的智能相册分类系统,实现: 三 ...
- SpringBoot3整合SpringSecurity6(二)SpringSecurity默默的干了些啥
写在前面 第一节中,我们基本上就引入SpringSecurity依赖,其他什么都没做就完成了认证功能. 之所以我们不用做什么,是因为SpringSecurity默认实现了很多功能. 当然了,这里默认实 ...
- 题解：AT_abc369_d [ABC369D] Bonus EXP
题目大意: 有 nnn 个怪物,每个怪物有一个战力值 aia_iai ,你可以选择击败他或放走他,放走他没有经验值,击败他可以获得 aia_iai 的经验值,如果击败的数量是偶数,则还可以获得 a ...
- Spring AOP面向切面编程 通知类型
Spring AOP面向切面编程 通知类型 通知分为: 前置通知 执行方法之前通知 后置通知 执行方法之后通知 异常通知 相当于cache里面的内容 最终通知 相当于finally 环绕通知 前四种通 ...
- 【ROS】2.1 Turtlebot3汉堡Burger连接和远程控制
机器人连接和远程控制 准备 充电 充电有两种方式: ①直接供电:电源适配器连接树莓派上的圆孔: ②电池供电:电源适配器插到蓝色的那个充电器,再将充电器与Burger底座的电池相连接.(当电池电量低于1 ...
- 使用 Python 接口编译和优化模型 （AutoTVM）
在本节,将介绍与TVMC相同的知识,但展示的是如何使用Python API来完成它.完成本节后,我们将使用适用于 TVM 的 Python API 来完成以下任务: 为TVM Runtime编译预训练 ...
- 操作系统：CPU工作模式-- 执行程序的三种模式
按照 CPU 功能升级迭代的顺序,CPU 的工作模式有实模式.保护模式.长模式,这几种工作模式下 CPU 执行程序的方式截然不同,下面我们一起来探讨这几种工作模式. 从一段死循环的代码说起 int m ...
- f-string 高效的字符串格式化
f-string,称为格式化字符串常量(formatted string literals),是Python3.6新引入的一种字符串格式化方法,该方法源于PEP 498 – Literal Strin ...
- VS Code + Cline + 魔搭MCP Server 实现抓取网页内容。
MCP的诞生,可以说是为AI带来一波新的活力. MCP(Model Context Protocol)是由Anthropic公司在2024年11月推出的一种开放标准协议,旨在为大型语言模型(LLM ...