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

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

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

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

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

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

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

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

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