绕不过去的坑, 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

/*  只支持IE8、9、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。