如何判断ie版本？

前言

在开发中对不兼容的 ie 浏览器提示是很常见的需求，下面就来聊聊如何实现判断 ie 的版本

条件注释

IE 条件注释是微软从 IE5 开始就提供的一种非标准逻辑语句，做用是能够灵活的为不一样 IE 版本浏览器导入不一样 html 元素。很显然这种方法的最大好处就在于属于微软官方给出的兼容解决办法并且还能经过 W3C 的效验，从 IE10 开始，IE 浏览器已经再也不支持条件注释。因此下面的写法，只能识别 IE9-浏览器

下面就来介绍常见的语法

识别单一

1. [if IE 6] ie 版本为 6
2. [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

参考

1. www.xiaohuochai.site/HTML/gramma…