Обнаружение версии IE (до v9) в JavaScript
Я хочу, чтобы подпрыгнуть пользователей нашего сайта на страницу ошибки, если они используют версию Internet Explorer
до v9. Это просто не стоит нашего времени и денег, чтобы поддержать IE pre-v9
. Пользователи всех других браузеров, отличных от IE, в порядке и не должны отскакивать. Вот предлагаемый код:
if(navigator.appName.indexOf("Internet Explorer")!=-1){ //yeah, he's using IE
var badBrowser=(
navigator.appVersion.indexOf("MSIE 9")==-1 && //v9 is ok
navigator.appVersion.indexOf("MSIE 1")==-1 //v10, 11, 12, etc. is fine too
);
if(badBrowser){
// navigate to error page
}
}
этот код будет делать трюк?
чтобы предотвратить несколько комментариев, которые, вероятно, будут идти в мою сторону:
- Да, я знаю, что пользователи могут подделать их
useragent
строку. Меня это не волнует. - Да, я знаю, что профессионалы программирования предпочитают вынюхивать функцию поддержки вместо типа браузера, но я не чувствую, что этот подход имеет смысл в этом случае. Я уже знаю, что все (соответствующие) не-IE браузеры поддерживают функции, которые мне нужны и которые все
pre-v9 IE
браузеры не. Проверка функция на сайте будет отходов. - Да, я знаю, что кто-то пытается получить доступ к сайту, используя
IE v1
(или >= 20) не получит 'badBrowser' установите значение true, и страница предупреждения не будет отображаться должным образом. Это риск, на который мы готовы пойти. - Да, я знаю, что Microsoft имеет "условные комментарии", которые могут быть использованы для точного определения версии браузера. IE больше не поддерживает условные комментарии с
IE 10
, что делает этот подход абсолютно бесполезным.
любые другие очевидные вопросы, чтобы быть в курсе?
30 ответов:
Это мой предпочтительный способ сделать это. Это дает максимальный контроль. (Примечание: условные операторы поддерживаются только в IE5-9.)
сначала правильно настроить классы ie
<!DOCTYPE html> <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html> <!--<![endif]--> <head>
тогда вы можете просто использовать CSS для создания исключений стиля, или, если вам нужно, вы можете добавить простой JavaScript:
(function ($) { "use strict"; // Detecting IE var oldIE; if ($('html').is('.lt-ie7, .lt-ie8, .lt-ie9')) { oldIE = true; } if (oldIE) { // Here's your JS for IE.. } else { // ..And here's the full-fat code for everyone else } }(jQuery));
спасибо Пол Ирландских.
возврат версии IE или если не IE возвращает false
function isIE () { var myNav = navigator.userAgent.toLowerCase(); return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false; }
пример:
if (isIE () == 8) { // IE8 code } else { // Other versions IE or not IE }
или
if (isIE () && isIE () < 9) { // is IE version less than 9 } else { // is IE 9 and later or not IE }
или
if (isIE()) { // is IE } else { // Other browser }
Если никто другой не добавил
addEventLister
- метод и вы используете правильный режим браузера, то вы можете проверить для IE 8 или меньше сif (window.attachEvent && !window.addEventListener) { // "bad" IE }
использовать условные комментарии. Вы пытаетесь обнаружить пользователей IE = 10 и не IE) комментарии будут рассматриваться как обычные комментарии HTML, что и есть.
пример HTML:
<!--[if lt IE 9]> WE DON'T LIKE YOUR BROWSER <![endif]-->
вы также можете сделать это чисто со скриптом, если вам нужно:
var div = document.createElement("div"); div.innerHTML = "<!--[if lt IE 9]><i></i><![endif]-->"; var isIeLessThan9 = (div.getElementsByTagName("i").length == 1); if (isIeLessThan9) { alert("WE DON'T LIKE YOUR BROWSER"); }
для обнаружения MSIE (v6 - v7 - v8 - v9 - v10 - v11) легко :
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { // MSIE }
вот как AngularJS проверки для IE
/** * documentMode is an IE-only property * http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx */ var msie = document.documentMode; if (msie < 9) { // code for IE < 9 }
чтобы надежно фильтровать IE8 и старше, проверка глобальных объектов можно использовать в:
if (document.all && !document.addEventListener) { alert('IE8 or lower'); }
эта функция возвращает номер основной версии IE в виде целого числа, или
undefined
если браузер не является Internet Explorer. Это, как и все решения user agent, является достаточным для спуфинга user agent (который был официальной функцией IE с версии 8).function getIEVersion() { var match = navigator.userAgent.match(/(?:MSIE |Trident\/.*; rv:)(\d+)/); return match ? parseInt(match[1]) : undefined; }
обнаружение IE в JS с помощью условных комментариев
// ---------------------------------------------------------- // A short snippet for detecting versions of IE in JavaScript // without resorting to user-agent sniffing // ---------------------------------------------------------- // If you're not in IE (or IE version is less than 5) then: // ie === undefined // If you're in IE (>=5) then you can determine which version: // ie === 7; // IE7 // Thus, to detect IE: // if (ie) {} // And to detect the version: // ie === 6 // IE6 // ie > 7 // IE8, IE9 ... // ie < 9 // Anything less than IE9 // ---------------------------------------------------------- // UPDATE: Now using Live NodeList idea from @jdalton 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 с помощью функции обнаружения (IE6+, браузеры до IE6 определяются как 6, возвращает null для браузеров, отличных от IE):
var ie = (function (){ if (window.ActiveXObject === undefined) return null; //Not IE if (!window.XMLHttpRequest) return 6; if (!document.querySelector) return 7; if (!document.addEventListener) return 8; if (!window.atob) return 9; if (!document.__proto__) return 10; return 11; })();
Edit: я создал РЕПО bower/npm для вашего удобства:ie-version
обновление:
более компактная версия может быть записан в одной строке:
return window.ActiveXObject === undefined ? null : !window.XMLHttpRequest ? 6 : !document.querySelector ? 7 : !document.addEventListener ? 8 : !window.atob ? 9 : !document.__proto__ ? 10 : 11;
это работает для меня. Я использую его как перенаправление на страницу, которая объясняет, почему нам не нравится
<!--[if lt IE 9]> <meta http-equiv="refresh" content="0;URL=http://google.com"> <![endif]-->
ваш код может выполнить проверку, но, как вы думали, если кто-то попытается получить доступ к Вашей странице с помощью IE v1 или > v19 не получит ошибку, поэтому может быть более безопасно выполнить проверку с помощью выражения Regex, такого как этот код ниже:
var userAgent = navigator.userAgent.toLowerCase(); // Test if the browser is IE and check the version number is lower than 9 if (/msie/.test(userAgent) && parseFloat((userAgent.match(/.*(?:rv|ie)[\/: ](.+?)([ \);]|$)/) || [])[1]) < 9) { // Navigate to error page }
условные комментарии больше не поддерживаются в IE с версии 10, как указано на справочная страница Microsoft.
var ieDetector = function() { var browser = { // browser object verIE: null, docModeIE: null, verIEtrue: null, verIE_ua: null }, tmp; tmp = document.documentMode; try { document.documentMode = ""; } catch (e) {}; browser.isIE = typeof document.documentMode == "number" || eval("/*@cc_on!@*/!1"); try { document.documentMode = tmp; } catch (e) {}; // We only let IE run this code. if (browser.isIE) { browser.verIE_ua = (/^(?:.*?[^a-zA-Z])??(?:MSIE|rv\s*\:)\s*(\d+\.?\d*)/i).test(navigator.userAgent || "") ? parseFloat(RegExp., 10) : null; var e, verTrueFloat, x, obj = document.createElement("div"), CLASSID = [ "{45EA75A0-A269-11D1-B5BF-0000F8051515}", // Internet Explorer Help "{3AF36230-A269-11D1-B5BF-0000F8051515}", // Offline Browsing Pack "{89820200-ECBD-11CF-8B85-00AA005B4383}" ]; try { obj.style.behavior = "url(#default#clientcaps)" } catch (e) {}; for (x = 0; x < CLASSID.length; x++) { try { browser.verIEtrue = obj.getComponentVersion(CLASSID[x], "componentid").replace(/,/g, "."); } catch (e) {}; if (browser.verIEtrue) break; }; verTrueFloat = parseFloat(browser.verIEtrue || "0", 10); browser.docModeIE = document.documentMode || ((/back/i).test(document.compatMode || "") ? 5 : verTrueFloat) || browser.verIE_ua; browser.verIE = verTrueFloat || browser.docModeIE; }; return { isIE: browser.isIE, Version: browser.verIE }; }(); document.write('isIE: ' + ieDetector.isIE + "<br />"); document.write('IE Version Number: ' + ieDetector.Version);
затем использовать:
if((ieDetector.isIE) && (ieDetector.Version <= 9)) { }
для ie 10 и 11:
вы можете использовать js и добавить класс в html для поддержания стандарта условные комментарии:
var ua = navigator.userAgent, doc = document.documentElement; if ((ua.match(/MSIE 10.0/i))) { doc.className = doc.className + " ie10"; } else if((ua.match(/rv:11.0/i))){ doc.className = doc.className + " ie11"; }
или использовать lib, как Боузер:
или modernizr для обнаружения объекта:
для обнаружения Internet Explorer 10/11 вы можете использовать этот маленький скрипт сразу после тега body:
в моем случае я использую библиотеку jQuery загружается в голову.
<!DOCTYPE HTML> <html> <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> <script>if (navigator.appVersion.indexOf('Trident/') != -1) $("body").addClass("ie10");</script> </body> </html>
на это был дан ответ до смерти, но это все, что вам нужно.
!!navigator.userAgent.match(/msie\s[5-8]/i)
var Browser = new function () { var self = this; var nav = navigator.userAgent.toLowerCase(); if (nav.indexOf('msie') != -1) { self.ie = { version: toFloat(nav.split('msie')[1]) }; }; }; if(Browser.ie && Browser.ie.version > 9) { // do something }
по данным Microsoft, следующее является лучшим решением, это также очень просто:
function getInternetExplorerVersion() // Returns the version of Internet Explorer or a -1 // (indicating the use of another browser). { var rv = -1; // Return value assumes failure. if (navigator.appName == 'Microsoft Internet Explorer') { var ua = navigator.userAgent; var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) rv = parseFloat( RegExp. ); } return rv; } function checkVersion() { var msg = "You're not using Internet Explorer."; var ver = getInternetExplorerVersion(); if ( ver > -1 ) { if ( ver >= 8.0 ) msg = "You're using a recent copy of Internet Explorer." else msg = "You should upgrade your copy of Internet Explorer."; } alert( msg ); }
Я рекомендую не переписывать этот код в сотый раз. Я бы рекомендовал вам использовать библиотеку Conditionizr (http://conditionizr.com/), который способен тестировать для конкретных версий IE, а также других браузеров, операционных систем и даже наличие или отсутствие дисплеев Retina.
включите код только для конкретных тестов, которые вам нужны, и вы также получите преимущество тестируемой библиотеки, которая прошла через множество итераций (и которая было бы легко обновить, не нарушая ваш код).
Он также хорошо сочетается с Modernizr, который может обрабатывать все те случаи, когда вам лучше тестировать конкретную возможность, а не конкретный браузер.
мне это нравится:
<script> function isIE () { var myNav = navigator.userAgent.toLowerCase(); return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false; } var ua = window.navigator.userAgent; //Internet Explorer | if | 9-11 if (isIE () == 9) { alert("Shut down this junk! | IE 9"); } else if (isIE () == 10){ alert("Shut down this junk! | IE 10"); } else if (ua.indexOf("Trident/7.0") > 0) { alert("Shut down this junk! | IE 11"); }else{ alert("Thank god it's not IE!"); } </script>
этот подход к обнаружению IE сочетает в себе сильные стороны и позволяет избежать недостатков ответа jKey с использованием условных комментариев и ответа Оуэна с использованием пользовательских агентов.
- подход jKey работает до версии 9 и невосприимчив к спуфингу агента пользователя в IE 8 & 9.
подход Оуэна может потерпеть неудачу на IE 5 & 6 (reporting 7) и восприимчив к спуфингу UA, но он может обнаруживать версии IE >= 10 (теперь также включая 12, которые постдатируют ответ Оуэна).
// ---------------------------------------------------------- // A short snippet for detecting versions of IE // ---------------------------------------------------------- // If you're not in IE (or IE version is less than 5) then: // ie === undefined // Thus, to detect IE: // if (ie) {} // And to detect the version: // ie === 6 // IE6 // ie > 7 // IE8, IE9 ... // ---------------------------------------------------------- var ie = (function(){ var v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while ( div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0] ); if (v <= 4) { // Check for IE>9 using user agent var match = navigator.userAgent.match(/(?:MSIE |Trident\/.*; rv:|Edge\/)(\d+)/); v = match ? parseInt(match[1]) : undefined; } return v; }());
Это может быть использовано для установки полезных классов для вашего документа, содержащего версию IE:
if (ie) { document.documentElement.className += ' ie' + ie; if (ie < 9) document.documentElement.className += ' ieLT9'; }
обратите внимание, что он определяет используемый режим совместимости, если IE находится в режиме совместимости. Также обратите внимание, что версия IE в основном полезна для более старых версий (
Я сделал удобный подчеркивания миксин для этого.
_.isIE(); // Any version of IE? _.isIE(9); // IE 9? _.isIE([7,8,9]); // IE 7, 8 or 9?
_.mixin({ isIE: function(mixed) { if (_.isUndefined(mixed)) { mixed = [7, 8, 9, 10, 11]; } else if (_.isNumber(mixed)) { mixed = [mixed]; } for (var j = 0; j < mixed.length; j++) { var re; switch (mixed[j]) { case 11: re = /Trident.*rv\:11\./g; break; case 10: re = /MSIE\s10\./g; break; case 9: re = /MSIE\s9\./g; break; case 8: re = /MSIE\s8\./g; break; case 7: re = /MSIE\s7\./g; break; } if (!!window.navigator.userAgent.match(re)) { return true; } } return false; } }); console.log(_.isIE()); console.log(_.isIE([7, 8, 9])); console.log(_.isIE(11));
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
или просто
// IE 10: ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)'; // IE 11: ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko'; // Edge 12: ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0'; // Edge 13: ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586'; var isIE = navigator.userAgent.match(/MSIE|Trident|Edge/) var IEVersion = ((navigator.userAgent.match(/(?:MSIE |Trident.*rv:|Edge\/)(\d+(\.\d+)?)/)) || []) [1]
самый полный сценарий JS, который я нашел для проверки версий IE, - это http://www.pinlady.net/PluginDetect/IE/. вся библиотека находится в http://www.pinlady.net/PluginDetect/Browsers/.
в IE10 условные операторы больше не поддерживаются.
с IE11 пользовательский агент больше не содержит MSIE. Кроме того, использование пользовательского агента не является надежным, поскольку его можно изменить.
с помощью сценария PluginDetect JS, вы можете обнаружить для IE и определить точные версии с помощью очень специфического и хорошо продуманного кода, предназначенного для конкретных версий IE. Это очень полезно, когда вы заботитесь именно о том, с какой версией браузера вы работаете.
Я понимаю, что я немного опоздал на вечеринку здесь, но я проверял простой способ одной линии, чтобы обеспечить обратную связь о том, является ли браузер IE и какая версия от 10 вниз это было. Я не закодировал это для версии 11, поэтому, возможно, для этого потребуется небольшая поправка.
однако это код, он работает как объект, который имеет свойство и метод и полагается на обнаружение объекта, а не на очистку объекта навигатора (который является массовым недостатком, как это может быть обманутый.)
var isIE = { browser:/*@cc_on!@*/false, detectedVersion: function () { return (typeof window.atob !== "undefined") ? 10 : (typeof document.addEventListener !== "undefined") ? 9 : (typeof document.querySelector !== "undefined") ? 8 : (typeof window.XMLHttpRequest !== "undefined") ? 7 : (typeof document.compatMode !== "undefined") ? 6 : 5; } };
использование
isIE.browser
свойство, которое возвращает логическое значение и опирается на условные комментарии методisIE.detectedVersion()
который возвращает число между 5 и 10. Я делаю предположение, что что-то ниже 6, и вы находитесь на серьезной территории старой школы, и вы будете чем-то более мускулистым, чем один лайнер, и что-то выше 10, и вы находитесь на более новой территории. Я читал что-то о IE11 не поддерживает условные комментарии, но я не полностью расследовано, то есть, возможно, на более поздний срок.в любом случае, как это, и для одного лайнера, он будет охватывать основы IE браузера и обнаружения версий. Он далек от совершенства, но он мал и легко исправляется.
просто для справки, и если кто-то сомневается в том, как на самом деле реализовать это, то следующее условие должно помочь.
var isIE = { browser:/*@cc_on!@*/false, detectedVersion: function () { return (typeof window.atob !== "undefined") ? 10 : (typeof document.addEventListener !== "undefined") ? 9 : (typeof document.querySelector !== "undefined") ? 8 : (typeof window.XMLHttpRequest !== "undefined") ? 7 : (typeof document.compatMode !== "undefined") ? 6 : 5; } }; /* testing IE */ if (isIE.browser) { alert("This is an IE browser, with a detected version of : " + isIE.detectedVersion()); }
обнаружение IE и его версий не может быть проще, и все, что вам нужно, это немного родного / ванильного Javascript:
var uA = navigator.userAgent; var browser = null; var ieVersion = null; if (uA.indexOf('MSIE 6') >= 0) { browser = 'IE'; ieVersion = 6; } if (uA.indexOf('MSIE 7') >= 0) { browser = 'IE'; ieVersion = 7; } if (document.documentMode) { // as of IE8 browser = 'IE'; ieVersion = document.documentMode; }
и это способ использовать его:
if (browser == 'IE' && ieVersion <= 9) document.documentElement.className += ' ie9-';
.
работает во всех версиях IE, включая более высокие версии в более низком представлении/режиме совместимости, и
documentMode
т. е. является частной собственностью.
Если вам нужно выбрать версию браузера IE, то вы можете следовать ниже кода. Этот код хорошо работает для версии IE6 до IE11
<!DOCTYPE html> <html> <body> <p>Click on Try button to check IE Browser version.</p> <button onclick="getInternetExplorerVersion()">Try it</button> <p id="demo"></p> <script> function getInternetExplorerVersion() { var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE "); var rv = -1; if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number { if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) { //For IE 11 > if (navigator.appName == 'Netscape') { var ua = navigator.userAgent; var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})"); if (re.exec(ua) != null) { rv = parseFloat(RegExp.); alert(rv); } } else { alert('otherbrowser'); } } else { //For < IE11 alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)))); } return false; }} </script> </body> </html>
окна запусков IE10 будут автоматически обновляться до IE11+ и будут стандартизированы W3C
В настоящее время нам не нужно поддерживать IE8-
<!DOCTYPE html> <!--[if lt IE 9]><html class="ie ie8"><![endif]--> <!--[if IE 9]><html class="ie ie9"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]--> <head> ... <!--[if lt IE 8]><meta http-equiv="Refresh" content="0;url=/error-browser.html"><![endif]-- ... </head>