绕不过去的坑, ie兼容

ie兼容应该是每一个前端都绕不过去的问题, 虽然早已听闻它的恶名,但之前都没有解决过, 终于在本周遇到了两个, 在此记录一下问题与解决办法。

ie的缓存

第一个问题, 增长了数据之后并不能看到新增的数据, 这是由于获取的都是缓存的数据。

IE浏览器会缓存网页中的GET和XHR的内容，请求方式是get方式时，IE浏览器会进行识别。若是该get请求的url是第一次请求的话，会请求服务器，从数据库中获取数据；若是该get请求的url不是第一次请求的话，那么该url就不会请求服务器，IE浏览器会直接从缓存中拿到上次该url获取的数据。不管是什么插件的get方式请求，IE浏览器都会这样进行处理的，从而致使数据不一样步。

解决办法

解决办法有不少,下面介绍两个我以为较好的

在header中设置no-cache参数

let headers = request.headers;

    /**
     * 发起get请求时判断是不是ie是的话加上no-cache  由于ie会缓存全部的get请求
     */
    // 判断是不是ie 下面的方法可测ie6~ie11
    // https://stackoverflow.com/questions/48182912/how-to-detect-browser-with-angular
    // @ts-ignore
    const isIE = false || !!document.documentMode;
    if (request.method === 'GET' && isIE) {
      headers = headers.append('Cache-Control', 'no-cache');
      headers = headers.append('Pragma', 'no-cache');
    }

在请求中增长一个时间戳

潘老师提供了另外一个思路, 既然会缓存GET请求, 那么让每次的请求不同就好了, 这个能够经过增长一个时间戳参数来实现。

感受这个设定真的太坑了。

pointer-events

项目中用到了sweetalert，可是每次弹窗后，页面就没法在点击了，潘老师猜想是由于有一层蒙版没有取消，可是为啥也不清楚，页面也不报错。后来在sweetalert的github找到了缘由

由于ie11如下都不支持pointer-events这个css属性，关于什么是pointer-events

pointer-events 是CSS3的一个属性，支持的值很是多，其中大部分都是和SVG有关。对于前端平常开发而言，只要了解 none 这个值就已经够咱们玩一段时间了。

pointer-events: none; 让鼠标事件失效（连接、点击等事件）。

解决办法

上面的做者已经回答了能够用visibility这个属性来代替pointer-events隐藏弹窗，而且给出了解决的css

/*  只支持IE八、九、10  */
/*
Target IE8-IE10 due to incompability with the css \`pointer-event\` property.

@see https://github.com/t4t5/sweetalert/issues/863
*/

@media screen\0 {

.swal-overlay {

visibility: hidden;

}
.swal-overlay--show-modal {

visibility: visible;

}

  

.swal-button__loader {

visibility: hidden;

}
.swal-overlay--show-modal .swal-modal {

visibility: visible;

}
.swal-modal {

visibility: hidden;

}
}

这个问题在最新的sweetalert代码中已经解决，但尚未发布到npm中。具体状况请看这个issue。