Определение версии 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
, формально следует поступить так:
- создать временный элемент;
- присвоить его свойству
style.display
значениеtable
; - сравнить значение
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 или ниже');
}По сравнению с проверкой существования глобальных объектов этот метод менее изящен и может работать медленнее.