在开发的过程中,前端在考虑到兼容性的问题,对ie浏览器会做一些单独的处理,来达到我们想要的效果。
背景:jQuery结合Vue开发项目,对于不支持vue的浏览器来说,我们需要给提示,让用户使用支持的浏览器,不然会白屏。
思路:vue中用到object.defineproperty和存储器属性hetter/setter所以只能兼容到IE9
试用1. 既然兼容到IE9,那我们采用html5判断
<!--[if lt IE 9]>
<script>
console.log('当前使用浏览器不支持该功能')
</script>
<![endif]-->
-
亲测,IE9以下浏览器能够顺利打印出结果
image.png
<!--[if IE 6]>仅IE6可识别<![endif]-->
<!--[if lte IE 6]> IE6及其以下版本可识别<![endif]-->
<!--[if lt IE 6]> IE6以下版本可识别<![endif]-->
<!--[if gte IE 6]> IE6及其以上版本可识别<![endif]-->
<!--[if gt IE 6]> IE6以上版本可识别<![endif]-->
<!--[if IE]> 所有的IE可识别<![endif]--> // edge,ie11,ie10 无效
<!--[if !IE]>除IE外都可识别<![endif]-->
试用2. js判断
<script type="text/javascript">
var temp = Object.defineProperty;
console.log(temp)
// edge: function defineProperty() { [native code] }
// 11: function defineProperty() { [native code] }
// 10: function defineProperty() { [native code] }
// 9: function defineProperty() { [native code] }
// 8: function defineProperty() { [native code] }
// 7: undefined
// 5: undefined
// 360兼容模式: function defineProperty() { [native code] }
</script>
由于项目jQuery+Vue+es6,有些语法ie不支持,因此变更需求,所有的IE浏览器都是给出提示,借用了大佬的方法
function IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) {
return 7;
} else if(fIEVersion == 8) {
return 8;
} else if(fIEVersion == 9) {
return 9;
} else if(fIEVersion == 10) {
return 10;
} else {
return 6;//IE版本<=7
}
} else if(isEdge) {
return 'edge';//edge
} else if(isIE11) {
return 11; //IE11
}else{
return -1;//不是ie浏览器
}
}
网友评论