如何判斷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…