前言
在开发中对不兼容的 ie 浏览器提示是很常见的需求，下面就来聊聊如何实现判断 ie 的版本
条件注释
IE 条件注释是微软从 IE5 开始就提供的一种非标准逻辑语句，作用是可以灵活的为不同 IE 版本浏览器导入不同 html 元素。很显然这种方法的最大好处就在于属于微软官方给出的兼容解决办法而且还能通过 W3C 的效验，从 IE10 开始，IE 浏览器已经不再支持条件注释。所以下面的写法，只能识别 IE9-浏览器
下面就来介绍常见的语法
识别单一
- [if IE 6] ie 版本为 6
- [if IE 7] ie 版本为 7
范围识别
| api | 描述 |
|---|---|
| gt | 大于 |
| gte | 大于等于 |
| lt | 小于 |
| lte | 小于等于 |
比如判断 ie 版本大于 7 的
<!--[if get IE 7]>
<div class="box" id="box"></div>
<![endif]-->
第一版
根据上面的条件注释，我们很容易想到实现第一版功能，至于 ie10 和 ie11 怎么判断我们后面再说
function isIe(edition) {
const dom = document.createElement("div");
dom.innerHTML = `
<!--[if IE ${edition}]>
<div class="box"></div>
<![endif]-->`.trim();
return dom.getElementsByTagName("div").length == 1;
}
可以打开 ie 浏览器简单的测试一下，撒花第一版功能已经实现了，下面就修复怎么来判断 ie10 和 ie11 的问题了
window.navigator属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本通过这个属性了解用户的环境信息，我们可以根据字段来正则判断 ie 的版本
第二版
下面的navigator.userAgent信息，我已经取到了，下面就是判断一下对应的关键词
-
ie10:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E) -
ie11:
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
function ie10() {
var reg = /MSIE\s+(\d+)/;
var exec = reg.exec(navigator.userAgent);
return exec && exec[1] == "10";
}
function ie11() {
var reg = /rv:(\d+)/;
var exec = reg.exec(navigator.userAgent);
return exec && exec[1] == "11";
}
这里就完成了 ie10 和 ie11 的判断，下面就是整合
function ie10() {
var reg = /MSIE\s+(\d+)/;
var exec = reg.exec(navigator.userAgent);
return exec && exec[1] == "10";
}
function ie11() {
var reg = /rv:(\d+)/;
var exec = reg.exec(navigator.userAgent);
return exec && exec[1] == "11";
}
function isIe(edition) {
var dom = document.createElement("div");
dom.innerHTML = (
"\n <!--[if IE " +
edition +
']>\n <div class="box"></div>\n <![endif]-->'
).trim();
return dom.getElementsByTagName("div").length == 1;
}
function ie(edition) {
if (edition <= 9) {
return isIe(edition);
} else if (edition == 10) {
return ie10();
} else if (edition == 11) {
return ie11();
}
return false;
}
兼容双核
上面的版本在 ie 上运行是正常的，不过在国产的一些兼容模式下会存在问题，主要是条件注释语句失效了，解决这个问题也很简单，我们直接通过上面判断 ie10 的方法即可，我们取到对应的版本号判断
function isIe(edition) {
var reg = /MSIE\s+(\d+)/;
var exec = reg.exec(navigator.userAgent);
return exec && exec[1] == String(edition);
}
function ie11() {
var reg = /rv:(\d+)/;
var exec = reg.exec(navigator.userAgent);
return exec && exec[1] == "11";
}
function ie(edition) {
if (edition <= 10) {
return isIe(edition);
} else if (edition == 11) {
return ie11();
}
return false;
}
最后
封装了一个工具函数，如果你喜欢欢迎来Star
