Определить версию 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, что делает этот подход абсолютно бесполезным.
Любые другие очевидные проблемы, о которых нужно знать?
37 ответов
Это мой любимый способ сделать это. Это дает максимальный контроль. (Примечание: условные операторы поддерживаются только в 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
}
Используйте условные комментарии. Вы пытаетесь обнаружить пользователей IE < 9, и в этих браузерах будут работать условные комментарии; в других браузерах (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");
}
Если никто не добавил addEventLister-метод, и вы используете правильный режим браузера, то вы можете проверить IE 8 или менее с
if (window.attachEvent && !window.addEventListener) {
// "bad" IE
}
Чтобы легко обнаружить 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 с использованием функции обнаружения (IE6+, браузеры до IE6 определяются как 6, возвращает ноль для браузеров не 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;
})();
Редактировать: я создал репозиторий Bower/ Npm для вашего удобства: ie-версия
Обновить:
более компактная версия может быть записана в одну строку как:
return window.ActiveXObject === undefined ? null : !window.XMLHttpRequest ? 6 : !document.querySelector ? 7 : !document.addEventListener ? 8 : !window.atob ? 9 : !document.__proto__ ? 10 : 11;
Эта функция возвращает номер основной версии IE в виде целого числа, или undefined если браузер не Internet Explorer. Это, как и все решения пользовательских агентов, допускает подделку пользовательских агентов (которая была официальной функцией 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;
}());
Это работает для меня. Я использую его как перенаправление на страницу, которая объясняет, почему нам не нравится <!--[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
}
Начиная с версии 10 условные комментарии больше не поддерживаются в IE, как указано на справочной странице 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.$1, 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))
{
}
Например, 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 как bowser:
Или модернизр для обнаружения функций:
На это ответили до смерти, но это все, что тебе нужно.
!!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
}
Для обнаружения 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>
По мнению 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.$1 );
}
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 );
}
Я понимаю, что немного опоздал на вечеринку здесь, но я проверил простой однострочный способ дать отзыв о том, является ли браузер 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 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]
Я делаю так:
<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 (сообщение 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 в основном полезна для более старых версий (<10); более высокие версии более совместимы со стандартами, и, вероятно, лучше вместо этого проверить наличие функций, используя что-то вроде modernizr.js.
Самый полный JS-скрипт, который я нашел для проверки версий IE, это http://www.pinlady.net/PluginDetect/IE/. Вся библиотека находится по адресу http://www.pinlady.net/PluginDetect/Browsers/.
В IE10 условные операторы больше не поддерживаются.
В IE11 пользовательский агент больше не содержит MSIE. Кроме того, использование пользовательского агента ненадежно, поскольку его можно изменить.
Используя JS-скрипт PluginDetect, вы можете обнаружить 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>Я собираюсь рекомендовать не переписывать этот код в который раз. Я бы порекомендовал вам использовать библиотеку Conditionizr ( http://conditionizr.com/), которая может тестировать определенные версии IE, а также другие браузеры, операционные системы и даже наличие или отсутствие дисплеев Retina.
Включите код только для тех тестов, которые вам нужны, и вы также получите выгоду от протестированной библиотеки, которая прошла через многократные итерации (и которую было бы легко обновить, не нарушая ваш код).
Он также прекрасно сочетается с Modernizr, который может обрабатывать все те случаи, когда вам лучше тестировать определенные возможности, а не конкретный браузер.
Если вам нужно выбрать версию IE Browser, вы можете следовать приведенному ниже коду. Этот код хорошо работает для версии 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.$1);
alert(rv);
}
}
else {
alert('otherbrowser');
}
}
else {
//For < IE11
alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
}
return false;
}}
</script>
</body>
</html>
Не усложняйте такие простые вещи. Просто используйте простой и простой условный комментарий JScript. Это самый быстрый способ, потому что он добавляет нулевой код в браузеры, отличные от IE, для обнаружения и имеет совместимость, начиная с версий IE до того, как были поддержаны условные комментарии HTML. Короче,
var IE_version=(-1/*@cc_on,@_jscript_version@*/);
Остерегайтесь минификаторов: большинство (если не все) примут специальный условный комментарий за обычный комментарий и удалят его
По сути, приведенный выше код устанавливает значение IE_version для версии IE, которую вы используете, или -1, если вы не используете 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>");
}Это работает на основе того факта, что условные комментарии видны только в старых версиях Internet Explorer и IE. @_jscript_version до версии браузера. Например, если вы используете Internet Explorer 7, то @_jscript_version будет установлен в 7 таким образом, постобработанный javascript, который будет выполнен, будет выглядеть так:
var IE_version=(-1,7);
который оценивается до 7.
var isIE9OrBelow = function()
{
return /MSIE\s/.test(navigator.userAgent) && parseFloat(navigator.appVersion.split("MSIE")[1]) < 10;
}
Обнаружение 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, включая более высокие версии в более низком режиме совместимости View/Mode и documentMode является собственностью IE.
// Detect ie <= 10
var ie = /MSIE ([0-9]+)/g.exec(window.navigator.userAgent)[1] || undefined;
console.log(ie);
// Return version ie or undefined if not ie or ie > 10