Показывать сообщение, если браузер не является интернет-проводником 9 или более
Я хотел бы показать своим пользователям панель, которая выглядит так:
- Браузер не IE; или
- Браузер - это IE, но есть версия 8 или ранее
![http://blog.integryst.com/webcenter-interaction/files/2011/10/ie9-support-confluence.png]()
(Обратите внимание, что скриншот для иллюстрации - IE 9 поддерживается для моего сайта.)
Я нашел этот приятный плагин jQuery, но я не хочу использовать всплывающие окна.
http://jreject.turnwheel.com/
Сайт, на котором я буду реализовывать это, - это сайт Sharepoint 2013, поэтому я буду использовать веб-страницу редактора контента, чтобы включить содержимое HTML, которое вы предоставляете, и панель должна быть наверху всего остального.
Пожалуйста, включите CSS, если необходимо, чтобы он выглядел как скриншот?
Ответы
Ответ 1
HTML
IE 9 и ранее (вплоть до, я думаю, IE 4) можно идентифицировать с помощью условных комментариев в HTML.
Как @Jost отметил, вы можете использовать их для предупреждения пользователей IE в IE 8 и ранее, например:
<!--[if lte IE 8]>
BANNER HERE
<![endif]-->
Однако, поскольку IE 10 отказался от поддержки для них, вы не можете использовать их для идентификации браузеров, отличных от IE.
JQuery
jQuery используется для включения модуля обнаружения браузера ($.browser
), но он был удален в jQuery 1.9. Если вы можете использовать более раннюю версию jQuery (например, 1.8.3) или jQuery Migrate plugin, вы можете использовать это, чтобы показать баннер.
if ( !$.browser.msie || $.browser.version < 9 ) {
// Add banner to the page here.
}
Обнаружение браузера вообще
Обратите внимание, что обнаружение браузера затруднено. Новые браузеры выходят все время, поэтому любой плагин поддержки браузера может быстро устареть, а также предпосылка, на которой вы основываете свои предупреждающие сообщения. Обнаружение браузера jQuery было наиболее последовательно поддержано, и даже они в конце концов отказались от него.
В наши дни веб-разработчики обычно должны писать код, который работает в кросс-браузере, и использовать функцию обнаружения для работы с браузерами, которые не поддерживают функции, которые они хотят использовать.
Как вы работаете на сайте SharePoint, предположительно для внутреннего использования компанией, и компания ориентирована на Microsoft. Похоже, вы разрабатываете сайт для работы в IE и игнорируете другие браузеры во время разработки.
Если вы можете разумно ожидать, что большинство ваших пользователей будут в некоторой версии IE, возможно, условное предупреждение комментариев достаточно.
Ответ 2
Я нашел интересный вопрос. Поэтому я разработал script для себя, но, возможно, кто-то может извлечь из этого выгоду. Поэтому я отправил его в качестве ответа. Он возвращает объект с информацией обозревателя и ОС.
browser={};
if (/(chrome\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(firefox\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(MSIE\ [0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[0];
browser.version = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[1]);
} else if (/(Opera\/[0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[1]);
} else if (/(Trident\/[7]{1})/i.test(navigator.userAgent)) {
browser.agent = "MSIE";
browser.version = 11;
} else {
browser.agent = false;
browser.version = false;
}
if (/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "Windows";
switch(parseFloat(navigator.userAgent.match(/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/)[0].split(" ")[2])) {
case 6.0:
browser.osversion = "Vista";
break;
case 6.1:
browser.osversion = "7";
break;
case 6.2:
browser.osversion = "8";
break;
default:
browser.osversion = false;
}
} else if (/(OS\ X\ [0-9]{2}\.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "OS X";
browser.osversion = navigator.userAgent.match(/(OS\ X\ [0-9]{2}\.[0-9]{1})/)[0].split(" ")[2];
} else if (/(Linux)/.test(navigator.userAgent)) {
browser.os = "Linux";
browser.osversion = false;
}
Ответ 3
Вы можете использовать условную компиляцию в сочетании с условными комментариями
Вот краткий обзор того, как это может работать.
- Всегда показывать панель
- Установите флаг в javascript.
IEMinor=false
- Установите флаг в true, если IE <= 9, используя тег script и условные комментарии
- Используйте условную компиляцию, чтобы скрыть панель, если
@_jscript_version > 9
(фактически не нужно) и IEMinor===false
<div id="bar"><center>Not Supported</center></div>
<script>
var IEMinor = false;
</script>
<!-- [if lte IE 9] -->
<script>var IEMinor = true</script>
<!-- <![endif] -->
<script>
/*@cc_on @*/
/*@if (@_jscript_version > 9)
if (!IEMinor)
document.getElementById("bar").style.display = "none";
/*@end @*/
</script>
Мне было слишком ленив, чтобы добавить тип script...
Вот пример JSBin, который не показывает панель в IE 10+ (непроверенный). И показывает это в других случаях.
Примечание. Я не делал его похожим на скриншот, вы должны получить эту часть работы
Изменить: использование браузера IE для тестирования против IE < 10, похоже, работает
Edit2: Увы, я думал, что изображение IE9 также не поддерживается, чтобы IE9 изменил lte IE 9
на lt IE 9
и @_jscript_version > 9
на >= 9
Ответ 4
Необходимо проверить, работает ли движок браузера Trident 6+ (IE 9, 10, 11) (demo):
(function () {
var trident = {
string: navigator.userAgent.match(/Trident\/(\d+)/)
};
trident.version = trident.string ? parseInt(trident.string[1], 10) : null;
if (!trident.string || trident.version < 6) {
document.body.innerHTML = '<div class="alert">Not supported.</div>' +
document.body.innerHTML;
}
})();
Тем не менее, обнюхивание может сломаться в IE 11 финальной или будущей версиях, если Microsoft решит изменить строку userAgent
.
Ответ 5
Мне нравится простой условный html. (Упрощение всегда кажется лучше.)
Еще одно подробное предупреждение о javascript можно найти по адресу: http://www.browser-update.org
Ответ 6
Собственно в SharePoint (OP упомянул об этом) есть встроенная переменная browseris. Он доступен в области глобального окна. Отвечая на вопрос OP:
- Браузер - это IE, но есть версия 8 или ранее
- использовать браузерis.ie8down
(проверено на SP2013 on-prem)
Ответ 7
EDIT: это напрямую отвечает OP.
Я обновил ответ Dany с двумя проверенными обновлениями (IE 6,7,8,9,10,11), Chrome и Edge. Прежде всего потому, что обновления очень трудно читать в комментариях.
- Чистый javascript - не требуется jQuery
- IE10 сообщает IE 10 против IE 1
- Теперь это сообщение Edge
- Никаких конкретных элементов HTML, необходимых для предварительного существования (кроме тела)
- Протестировано в IE6, IE7, IE8, IE9, IE11, Chrome v62 и Edge
- TODO: заработайте его правильно в OSX Sierra и iPhone
Тест для края должен быть первым, поскольку он утверждает, что все.:/
Все это говорит Обнаружение браузера "это то, что есть", и мы можем надеяться, что его потребность скоро исчезнет.
browser = {};
if (/(Edge\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(chrome\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(firefox\/[0-9]{2})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(MSIE\ [0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[0];
browser.version = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]+)/i)[0].split(" ")[1]);
} else if (/(Opera\/[0-9]{1})/i.test(navigator.userAgent)) {
browser.agent = navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[0];
browser.version = parseInt(navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[1]);
} else if (/(Trident\/[7]{1})/i.test(navigator.userAgent)) {
browser.agent = "MSIE";
browser.version = 11;
} else {
browser.agent = false;
browser.version = false;
}
if (/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "Windows";
switch (parseFloat(navigator.userAgent.match(/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/)[0].split(" ")[2])) {
case 6.0:
browser.osversion = "Vista";
break;
case 6.1:
browser.osversion = "7";
break;
case 6.2:
browser.osversion = "8";
break;
default:
browser.osversion = false;
}
} else if (/(OS\ X\ [0-9]{2}\.[0-9]{1})/.test(navigator.userAgent)) {
browser.os = "OS X";
browser.osversion = navigator.userAgent.match(/(OS\ X\ [0-9]{2}\.[0-9]{1})/)[0].split(" ")[2];
} else if (/(Linux)/.test(navigator.userAgent)) {
browser.os = "Linux";
browser.osversion = false;
}
if (browser.agent === "MSIE" && browser.version <= 9) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "IE9 is not supported. You are using an UNSUPPORTED version of Internet Explorer.";
newDiv.setAttribute("style", "background-color:yellow;padding:18px;");
document.body.insertBefore(newDiv, document.body.firstChild);
} else { //TODO: Remove for Prod only added to show some flexibility and testing
var newDiv = document.createElement("div");
newDiv.innerHTML = "<b>" + browser.agent + "</b> is <i>so</i> supported. You are using version: " + browser.version + ".";
newDiv.setAttribute("style", "background-color:cyan;padding:12px;");
document.body.insertBefore(newDiv, document.body.firstChild);
}
Ответ 8
попробуйте $.browser.version
здесь http://api.jquery.com/jQuery.browser/
Ответ 9
Я не предлагаю вам использовать клиентскую сторону, поскольку некоторые браузеры могут обмануть вас, передав неправильные значения для прохождения тестов на сайте.
Итак, я предполагаю, что вы используете PHP в качестве серверной части, вы можете обнаружить браузер, используя функцию get_browser()
, которая дает вам много информации о браузере, здесь хороший туртеатр:
Часть 1:
http://thenewboston.org/watch.php?cat=11&number=67
Часть 2:
http://thenewboston.org/watch.php?cat=11&number=68
если вы используете другой язык, все языки на стороне сервера имеют эту функциональность только в google или ссылаются на какой-то тюрториальный
С клиентской стороны вы можете определить, совместимо ли это:
function Is_Compatible(){
var browser = navigator.appName;
var Fvar = document.getElementById('test').style.borderRadius;
if(browser !== 'Microsoft Internet Explorer'){
return false;
}
if(Fvar == undefined){
//Not IE9+
return false;
}else{
//Is IE9+
return true;
}
}
if(Is_Compatible() == true){
alert('Compatible');
}else{
alert('uncompatible');
}
HTML:
<div style="border-radius:20px;opacity:0;z-index:-500;" id="test"></div><!--It willl not inflect your design-->
FIDDLE:
Протестируйте его, и он работает:
http://jsfiddle.net/Z7fvb/