Найкращий спосіб перевірити наявність IE менше 9 у JavaScript без бібліотеки


76

Яким би був ваш найшвидший, найкоротший (найкращий) спосіб виявити браузер, який має IE та версію менше 9 у JavaScript, без використання jQuery чи будь-яких додаткових бібліотек?


Мені повністю відомі умови роботи в DOM. Цікавить лише невелике найкраще рішення JavaScript.
bcm

5
Не забувайте, що виявлення функцій - це найнадійніша річ, коли ви хочете використовувати функцію, яка відповідає певній версії (Однак ця функція може існувати, але в якійсь версії вона має помилку, майте це на увазі). Якщо ви хочете відобразити версію браузера на сторінці, використовуйте функцію виявлення браузера .
Dan

3
Я погоджуюсь, Ден, але по правді кажучи, часто непросто і / або кожному нелегко прив'язати певну різницю до ознаки (виявлення). Навіть якщо це так, код може бути легше читати, коли він схожий на надану відповідь (приклад: тобто <9).
bcm

Відповіді:


117

Javascript

var ie = (function(){

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );

    return v > 4 ? v : undef;

}());

Потім ви можете зробити:

ie < 9

Джеймсом Панолсі звідси: http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments


2
просто цікаво ... це все (div, all) лише в пам’яті, або до DOM дійсно здійснюється кілька разів доступ для отримання версії?
bcm

Це просто в пам’яті, div, який він створює, насправді не додається до DOM.
Майк Льюїс,

5
Хм, це звичайний whileсинтаксис? Або якийсь хак?
Тім Бюте

13
@ TimBüthe: Оператор з комами . По суті, це додавання внутрішнього HTML і повернення all[0](яке є першим <i>у div). Поки результат "істинний" ( <i>знайдено), він піднімається вгору за версією IE і продовжує далі.
Brad Christie

1
Варто зазначити, що IE більше не підтримує умовні коментарі IE10 +
daviestar

99

за свою ціну:

    if(  document.addEventListener  ){
        alert("you got IE9 or greater");
    }

Це успішно націлено на IE 9+, оскільки addEventListenerметод дуже рано підтримувався для кожного основного браузера, крім IE. (Chrome, Firefox, Opera та Safari) Довідник MDN . В даний час він підтримується в IE9, і ми можемо очікувати, що він і надалі підтримуватиметься тут.


3
На мою думку, це найкраща відповідь, до виявлення браузера слід підходити, виявляючи конкретні функції /
7dr3am7

4
Мені подобається така відповідь. Це не виявлення версії браузера, це виявлення можливостей браузера - що зазвичай є більш корисним. Виявлення такої функції, як "addEventListener", не лише відокремить IE8 від IE9, але й відокремить старі браузери від браузерів, що підтримують HTML5.
garyv

8
var ltIE9 = !document.addEventListener;
josephrace

6
На жаль, це не вдається, якщо ви вже заповнили document.addEventListener. Умовні коментарі IE щодо цього не захищені.
Даніель Вайнер

2
Щоб запобігти відмові методу від поліфілів. Просто поверніть його навколо і перевірте:if( !document.attachEvent){ // IE8+ }
Jesper Jensen

27

Використовуючи умовні коментарі, ви можете створити блок сценарію, який буде виконуватися лише в IE менше 9.

<!--[if lt IE 9 ]>
<script>
var is_ie_lt9 = true;
</script>
<![endif]--> 

Звичайно, ви можете передувати цьому блоку універсальним блоком, який оголошує var is_ie_lt9=false, що це замінить для IE менше 9. (У такому випадку ви хочете видалити varдекларацію, оскільки вона буде повторюваною).

РЕДАГУВАТИ : Ось версія, яка не покладається на вбудовані блоки скриптів (можна запустити із зовнішнього файлу), але не використовує внюхування агента користувача:

Через @cowboy :

with(document.createElement("b")){id=4;while(innerHTML="<!--[if gt IE "+ ++id+"]>1<![endif]-->",innerHTML>0);var ie=id>5?+id:0}

2
створення глобальної змінної за допомогою умовних тегів ... цікаво.
bcm

Він має ту перевагу, що не залучає жодного RegEx і, мабуть, не піддається обробці. IE аналізує змінну як ніщо. (Що для IE щось говорить.)
Ягель,

це досить добре, я міг би використовувати if (window.ielt9). Цікаво, чи могло б бути рішення, що не є вбудованим сценарієм, краще, ніж це? (що було б шикарно ...)
bcm

Здається, рішення @ cwolves дозволить вам запустити його у зовнішньому скрипті (я ніколи не пробував.)
Ягель,

10

бах до умовних коментарів! Умовний код до кінця !!! (нерозумно IE)

<script type="text/javascript">
/*@cc_on
   var IE_LT_9 = (@_jscript_version < 9);
@*/
</script>

Якщо серйозно, просто викиньте це на випадок, якщо вам більше підходить ... це одне і те ж, це може бути просто у файлі .js замість вбудованого HTML

Примітка: абсолютно випадково, що тут перевірка jscript_version має значення "9". Встановивши його на 8, 7 тощо не буде перевіряти "це IE8", вам потрібно буде переглянути версії jscript для цих браузерів.


1
@bcm - ви повинні потрапити IE_LT_9 == falseв IE9 та trueв IE8. Зараз я використовую mac, і тут у мене немає ПК, тому я не можу його перевірити, але я витягнув це з коду, який я написав, що знаю, що працює. Якщо з якихось причин це не працює, alert(@_jscript_version)подивіться, що ви отримаєте, і налаштуйте звідти.
Mark Kahn

2
зітхаючи, код працює, IE9 насправді не запускає IE7, коли він перебуває в `` режимі сумісності '', він все ще використовує движок JS IE9. jsfiddle.net/aNGXS За даними IETester: IE9 каже `` 9 '', IE8 каже `` 5,6 ''
Марк Кан

1
в будь-якому випадку, використовуйте окрему версію IE8, і ви НЕ отримаєте "9" у цьому попередженні. Ви отримаєте "5.8" або щось подібне (не впевнений конкретно, чи колись вони оновлювали движок JScript, але це НЕ 9)
Марк Кан

1
OMFG, я щойно перевірив це на П’ЯТЬ машинах через RDC, і це працює на КОЖНОМУ. IE8 каже "5.8", IE9 говорить "9". Ви робите щось неправильно або вважаєте, що не використовуєте движок IE9, коли є. Як я вже говорив, IE9 у "режимі сумісності" або з іншим агентом користувача все ще є IE9. Запустіть автономну версію IE8, IE7 або будь-що попереднє, і код працює.
Mark Kahn

3
Ти все ще використовуєш IE9! Це виявляє -THAT-. Якщо ви запустите автономну копію, якщо IE8, це буде показано. Не звинувачуйте мене в тому, що інструменти розробників Microsoft нічого не варті.
Mark Kahn

9

Нижче наведено вдосконалення щодо рішення Джеймса Падолсі:

1) Це не забруднює пам’ять (наприклад, фрагмент Джеймса створює 7 невилучених фрагментів документа при виявленні IE11).
2) Це швидше, оскільки він перевіряє значення documentMode перед створенням розмітки.
3) Це набагато читабельніше, особливо для початківців програмістів JavaScript.

Посилання на суть: https://gist.github.com/julianshapiro/9098609

/*
 - Behavior: For IE8+, we detect the documentMode value provided by Microsoft.
 - Behavior: For <IE8, we inject conditional comments until we detect a match.
 - Results: In IE, the version is returned. In other browsers, false is returned.
 - Tip: To check for a range of IE versions, use if (!IE || IE < MAX_VERSION)...
*/

var IE = (function() { 
    if (document.documentMode) {
        return document.documentMode;
    } else {
        for (var i = 7; i > 0; i--) {
            var div = document.createElement("div");

            div.innerHTML = "<!--[if IE " + i + "]><span></span><![endif]-->";

            if (div.getElementsByTagName("span").length) {
                return i;
            }
        }
    }

    return undefined;
})();

8
var ie = !-[1,]; // true if IE less than 9

Цей хак підтримується в ie5,6,7,8. Він закріплений у ie9 + (тому він відповідає вимогам цього питання). Цей хак працює у всіх режимах сумісності IE.

Як це працює : тобто движок трактує масив з порожнім елементом (наприклад, [, 1]) як масив із двома елементами, натомість інші браузери вважають, що є лише один елемент. Отже, коли ми перетворюємо цей масив на число за допомогою оператора +, ми робимо щось подібне: (', 1' в ie / '1' в інших) * 1 і отримуємо NaN в ie і 1 в інших. Тоді ми перетворюємо його на логічне і зворотне значення за допомогою!. Простий. До речі, ми можемо використовувати коротшу версію без! знак, але значення буде змінено.

На даний момент це найкоротший злом. А я автор;)


Чи можете ви пояснити, як / чому це працює? Це виглядає як трохи неприємний хак: ви покладаєтесь на примхи механізму JavaScript, і що конкретні версії механізму JavaScript відповідають певним версіям IE. Чи все ще це працює в нових IE, встановлених для забезпечення зворотної сумісності в засобах налагодження або режиму сумісності?
Руп

Цей хак підтримується в ie5,6,7,8. Він закріплений у ie9 + (тому він відповідає вимогам цього питання). Як це працює: тобто движок трактує масив з порожнім елементом (наприклад, [, 1]) як масив із двома елементами, натомість інші браузери вважають, що є лише один елемент. Отже, коли ми перетворюємо цей масив на число за допомогою оператора +, ми робимо щось подібне: (', 1' в ie / '1' в інших) * 1 і отримуємо NaN в ie і 1 в інших. Тоді ми перетворюємо його на логічне і зворотне значення за допомогою!. Простий. До речі, ми можемо використовувати коротшу версію без! знак, але значення буде змінено.
Алеко

Добре, але якщо я переведу IE 9 у режим сумісності IE 7, чи виявить він IE 7? Однак дякую за пояснення - це було б краще відредагувати у відповіді, а не залишити як коментар.
Руп


5

Це посилання містить відповідну інформацію щодо виявлення версій Internet Explorer:

http://tanalin.com/en/articles/ie-version-js/

Приклад:

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

Мені найбільше подобається ваша відповідь. Простий, не багато рядків коду і гнучкий.
user2662680

4

Ви можете зробити це швидко і брудно з регулярним виразом і .match():

if (navigator.userAgent.match(/MSIE\s(?!9.0)/)) {
    // ie less than version 9
}

8
На жаль, це виявляє лише IE, крім IE 9. Наприклад, це також буде справедливо для IE 10.
Тім Янсен

4

На вашому місці я б використовував умовну компіляцію або виявлення функцій.
Ось ще одна альтернатива:

<!--[if lt IE 9]><!-->
<script>
    var LTEIE8 = true;
</script>
<!--<![endif]-->

2

Мені сподобалась відповідь Майка Льюїса, але код не пройшов jslint, і я не міг зрозуміти фанкі цикл while. Моїм випадком використання є виведення повідомлення, яке не підтримується браузером, якщо воно менше або дорівнює IE8.

Ось безкоштовна версія jslint на основі Майка Льюїса:

/*jslint browser: true */
/*global jQuery */
(function () {
    "use strict";
    var browserNotSupported = (function () {
        var div = document.createElement('DIV');
        // http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
        div.innerHTML = '<!--[if lte IE 8]><I></I><![endif]-->';
        return div.getElementsByTagName('I').length > 0;
    }());
    if (browserNotSupported) {
        jQuery("html").addClass("browserNotSupported").data("browserNotSupported", browserNotSupported);
    }
}());

1
тому що jquery 2.x не підтримує, тобто <9, тому шматок коду призведе до помилок, збоїв, страху та загибелі.

1

Чи потрібно це робити в JavaScript?

Якщо ні, то ви можете використовувати синтаксис умовного коментаря для IE:

<!--[if lt IE 9]><h1>Using IE 8 or lower</h1><![endif]-->

1
Рішення JavaScript, не в DOM
bcm

1
if (+(/MSIE\s(\d+)/.exec(navigator.userAgent)||0)[1] < 9) {
    // IE8 or less
}
  • витягніть версію IE за допомогою: /MSIE\s(\d+)/.exec(navigator.userAgent)
  • якщо це не браузер IE, він повернеться, nullтому в такому випадку ||0переключиться nullна0
  • [1]отримає основну версію IE, або undefinedякщо це не браузер IE
  • ведучий +перетворить його в число, undefinedперетвориться наNaN
  • порівняння NaNз числом завжди повернетьсяfalse

0

Ви всі намагаєтесь ускладнити такі прості речі. Просто використовуйте простий і простий умовний коментар JScript. Це найшвидше, оскільки він додає нульовий код у браузери, що не належать до IE, для виявлення, і він має сумісність, що сягає версій IE до того, як підтримувались умовні коментарі HTML. Коротко,

var IE_version=(-1/*@cc_on,@_jscript_version@*/);

Остерігайтеся мініфайерів: більшість (якщо не всі) помилково приймуть спеціальний умовний коментар за звичайний коментар і видалять його

По суті, тоді код вище встановлює значення IE_version до версії IE, яку ви використовуєте, або -1 f, коли ви не використовуєте IE. Демонстрація в прямому ефірі:

var IE_version=(-1/*@cc_on,@_jscript_version@*/);
if (IE_version!==-1){
    document.write("<h1>You are using Internet Explorer " + IE_version + "</h1>");
} else {
    document.write("<h1>You are not using a version of Internet Explorer less than 11</h1>");
}

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.