绕不过去的坑, ie兼容
2020/4/5 5:01:21
本文主要是介绍绕不过去的坑, 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。
这篇关于绕不过去的坑, ie兼容的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程