Родительские страницы:
  1. Главная
  2. Статьи
  3. Определение версии Internet Explorer (IE) в JavaScript

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

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

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

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

В таблице приведены такие объекты для всех распространённых версий IE.

Версия IE Поддерживаемый объект-признак
10+ (CP) window.atob
9+ document.getElementsByClassName
8+ document.querySelector
7+ window.XMLHttpRequest
6+ document.compatMode

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

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

Примеры

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

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

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

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

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

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

<!DOCTYPE html>

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

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

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

Условная компиляция

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

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; }}()||@*/0;

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

Условные комментарии

Условные комментарии — нестандартная возможность, доступная только в IE и основанная на комментариях 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-элемента, содержащего узел, заключённый в условный комментарий, и последующая проверка наличия дочерних узлов во временном элементе:

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

    if (document.all && test.childNodes.length) {
        alert('IE7 или ниже');
    }

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

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

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

Однако IE хронически отстаёт от всех других браузеров настолько, что многие возможности заведомо недоступны только в 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} не поддерживается');
}

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

Демонстрация