Определение версии Internet Explorer (IE) в JavaScript

Автор:
Марат Таналин
Опубликовано:
Обновлено:
Краткое описание
Определение версии браузера Internet Explorer (IE) вплоть до IE10 включительно средствами JavaScript, безопасное для применения совместно с минимизацией (minification).

Отличить Internet Explorer версий 10 и ниже от других браузеров в JavaScript-сценариях можно путём проверки существования нестандартного объекта document.all, из распространённых браузеров доступного только в IE10 и ниже.

Определить конкретную версию IE можно путём дополнительной проверки существования стандартных глобальных объектов, появившихся только начиная с определённой, заранее известной, версии IE.

В таблице приведены такие объекты для IE вплоть до версии 10 включительно.

Версии IE Поддерживаемый стандартный объект
10+ window.atob
9+ document.addEventListener
8+ document.querySelector
7+ window.XMLHttpRequest
6+ document.compatMode

Проверяя существование этих объектов и при необходимости сочетая такие проверки, можно достоверно фильтровать конкретную версию или диапазон версий IE вплоть до 10 включительно.

Метод надёжно работает в том числе при применении совместно с минимизацией (minification) кода.

В следующей таблице приведены готовые условия.

Версии IE Условие для проверки
10 и ниже document.all
9 и ниже document.all && !window.atob
8 и ниже document.all && !document.addEventListener
7 и ниже document.all && !document.querySelector
6 и ниже document.all && !window.XMLHttpRequest
5.x document.all && !document.compatMode

Примеры

Следующее условие выполняется только в IE версии 7 и ниже:

if (document.all && !document.querySelector) {
    alert('IE7 или ниже');
}

Следующее — в IE8, но не в IE7 или IE9+:

if (document.all && document.querySelector && !document.addEventListener) {
    alert('IE8');
}

Условие в следующем примере истинно в том случае, если браузер — IE11+ или не IE:

if (!document.all) {
    alert('IE11+ или не IE');
}

Применение в behavior (*.htc)

HTML Components (файлы *.htc) — особые HTML-документы, содержащие JavaScript-сценарии, привязываемые к HTML-элементам при помощи нестандартного CSS-свойства behavior, поддерживаемого только в IE. Для определения версии IE с использованием проверки существования объектов htc-файл должен быть снабжён DOCTYPE-объявлением подобно любому корректному HTML-документу:

<!DOCTYPE html>

В противном случае почти все перечисленные выше объекты-признаки (кроме window.XMLHttpRequest) будут отсутствовать вне зависимости от версии IE.

Кроме того, поскольку behavior поддерживаются только в IE, проверка существования document.all в этом случае не нужна.

Определение версии браузера и хорошие практики

В общем случае наличие функциональности следует проверять напрямую. Например, чтобы узнать, доступен ли JavaScript-метод querySelector(), следует проверить существование именно объекта querySelector. В противном случае возможны ситуации, когда скрипт будет считать возможность недоступной, хотя реально она доступна, и наоборот.

Однако зачастую IE является единственным браузером, где недоступна определённая возможность, поэтому проводить в других браузерах формально «полноценные», но медленные проверки может быть нецелесообразным.

Например, чтобы проверить, поддерживает ли браузер CSS-свойство display: table, формально следует поступить так:

  1. создать временный элемент;
  2. присвоить его свойству style.display значение table;
  3. сравнить значение style.display с table.

Но учитывая, что display: table давно поддерживается всеми отличными от IE браузерами, а в IE поддержка была реализована начиная с 8-й версии, достаточно просто проверить версию IE по косвенному признаку:

if (document.all && !document.querySelector) { // IE7 или ниже
    alert('{display: table} не поддерживается');
}

Такая проверка отработает намного быстрее и при этом вполне безопасна для будущих версий браузеров.

Другие способы определения версии IE

Условная компиляция (conditional compilation)

Внимание
Начиная с IE11 (как минимум версии для Windows 7), условная компиляция более недоступна.

Иногда для определения версии IE используются директивы условной компиляции — нестандартные условные конструкции, поддерживаемые только в IE и обычно заключаемые в комментарии JavaScript, чтобы гарантировать формальную синтаксическую корректность кода и, следовательно, совместимость с другими браузерами.

Определение версии IE в этом случае основано на однозначном соответствии версий IE и движка JavaScript, используемого в конкретной версии IE:

Версия IE 10 9 8 7 6
Версия движка JavaScript 10 9 5.8 5.7 5.6

Например, следующий код можно использовать для определения версий IE с 3-й по 10-ю:

var ieVersion = /*@cc_on (function() {switch(@_jscript_version) {case 1.0: return 3; case 3.0: return 4; case 5.0: return 5; case 5.1: return 5; case 5.5: return 5.5; case 5.6: return 6; case 5.7: return 7; case 5.8: return 8; case 9: return 9; case 10: return 10;}})() || @*/ 0;

К сожалению, условная компиляция небезопасна при использовании в сочетании с минимизацией JavaScript-кода (например, при помощи Google Closure Compiler), поскольку соответствующими алгоритмами комментарии обычно удаляются.

Кроме того, использование условной компиляции для определения версии IE работает корректно только в настоящих версиях IE. В режимах эмуляции предыдущих версий IE (такая возможность доступна в IE8 и выше в панели, вызываемой по нажатию клавиши F12) служебная константа @_jscript_version содержит номер версии JavaScript-движка реальной версии IE вне завимости от того, находится он в режиме эмуляции старой версии IE или нет. Это потенциально затрудняет отладку JavaScript-сценариев для работы в разных версиях IE.

Свойство document.documentMode

Более удобным и предсказуемым, чем условная компиляция, является использование нестандартного свойства document.documentMode, содержащего номер версии IE с учётом режима эмуляции одной из предыдущих версий IE, если таковой включён:

if (document.all && document.documentMode && 8 === document.documentMode) {
    alert('IE8 или IE9+ в режиме совместимости с IE8');
}

Следует учитывать, что это свойство доступно только в IE8 и выше, поэтому различение версий IE ниже 8-й с помощью этого свойства невозможно. Для определения диапазона версий ниже 8 требуется более сложное условие:

if (document.all && (!document.documentMode || (document.documentMode && document.documentMode < 8))) {
    alert('IE7 или ниже или IE8+ в режиме совместимости с IE7');
}

Следует учитывать, что, поскольку свойство document.documentMode нестандартное и единственным его назначением является определение версии IE, не исключено, что в дальнейшем от его поддержки откажутся, как отказались от поддержки условных комментариев.

Условные комментарии (conditional comments)

Внимание
Начиная с версии 10, поддержка условных комментариев в Internet Explorer прекращена.

Условные комментарии — нестандартная возможность, доступная только в IE9 и ниже и основанная на комментариях HTML.

Для определения версии IE в JavaScript условные HTML-комментарии можно задействовать по-разному.

  • Инициализация JavaScript-переменных непосредственно в статическом HTML-коде:

    в HTML-файле:
    <script>
        var ie = false;
    </script>
    <!--[if lte IE 7]><script>
        ie = 7;
    </script><![endif]-->
    в JavaScript-файле:
    if (7 === ie) {
        alert('IE7 или ниже');
    }

    Использование условных комментариев в статическом HTML-коде страдает недостаточной гибкостью, приводит к замусориванию HTML-кода и распылению логики на несколько файлов, затрудняя работу с таким кодом.

  • Динамическая генерация временного HTML-элемента, содержащего узел, заключённый в условный комментарий, и последующая проверка, был ли условный комментарий обработан браузером (если условие в условном комментарии истинно, IE автоматически заменяет в DOM-дереве условный комментарий его содержимым):

    var test = document.createElement('div');
    test.innerHTML = '<!--[if lte IE 7]>1<![endif]-->';

    if ('1' === test.innerHTML) {
        alert('IE7 или ниже');
    }

    По сравнению с проверкой существования глобальных объектов этот метод менее изящен и может работать медленнее.