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

解决办法有很多

  1. 不适用cors方式处理跨域,比如jsonp或nginx反向代理等
  2. 引入一个专门处理此问题的库jQuery-ajaxTransport-XDomainRequest放在公共位置
  3. 打开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去编译,
就比较繁琐。
可以使用官方另一种做法(性能要低于本地编译)

  1. 在公共部分,引入垫片库polyfill.min.js
  2. 在公共部分,引入babel在线编译库@babel/standalone/babel.min.js
  3. 给不兼容的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;
});
posted @ 2023-01-12 10:47  丁少华  阅读(65)  评论(0编辑  收藏  举报