基于dva框架兼容IE浏览器常见问题收录
1、打开浏览器出现空白,控制台报错“对象不支持“startsWith”属性或方法”
解决方案:
a、安装babel-polyfill
npm install babel-polyfill --save
b、index.js入口文件顶部引用
import 'babel-polyfill';
2、IE浏览器GET请求缓存问题(同一个get请求相同参数会直接从缓存中拿)
方案一:
在get请求后面添加一个参数 t= 时间戳
t = new Date().getTime();
方案二:
请求头中加:
['Cache-Control'] = 'no-cache';
['Pragma'] = 'no-cache';
3、在jsx中单独为特定浏览器设置样式
检测浏览器类型方法:
// 获取浏览器类型
function getBrowserType() {
const userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
const isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
const isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera || userAgent.indexOf("rv:11") > -1; //判断是否IE浏览器
const isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
const isFirefox = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
const isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") === -1; //判断是否Safari浏览器
const isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
if (isIE) {
if(userAgent.indexOf("rv:11") > -1) {
return 'IE11';
}
if(userAgent.indexOf("rv:12") > -1) { //这一段还没验证
return "IE12";
}
const reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
const fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion === 7) {
return "IE7";
} else if (fIEVersion === 8) {
return "IE8";
} else if (fIEVersion === 9) {
return "IE9";
} else if (fIEVersion === 10) {
return "IE10";
} else if (fIEVersion === 11) {
return "IE11";
} else if (fIEVersion === 12) {
return "IE12";
} else {
return "0"; //IE版本过低
}
} //isIE end
if (isFirefox) return "FF";
if (isOpera) return "Opera";
if (isSafari) return "Safari";
if (isChrome) return "Chrome";
if (isEdge) return "Edge";
}
eg:
// 判断浏览器类型是否为ie
const isIE = getBrowserType().includes('IE');
<div style={{color: `${isIE ? '#FFFFFF' : '#000000'}`}}>ie中字体白色</div>
4、new Date在ie浏览器的兼容性
如果时间是2020-03-16 08:00
使用ie浏览器输出new Date("2020-03-16 08:00")为NaN
解决办法把字符串中的“-”换成“/”就行了,方法为.replace(/-/g,"/")
-----------未完待续,后续持续更新-------------
小伙伴们感觉有帮助的话希望点个赞哟,如果有问题或疑问欢迎大家评论区留言,看到后第一时间回复。