在開發的過程中,前端在考慮到兼容性的問題,對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瀏覽器
}
}