Подтвердить что ты не робот

Показывать сообщение, если браузер не является интернет-проводником 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, если необходимо, чтобы он выглядел как скриншот?

4b9b3361

ОТВЕТЫ

Ответ 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;
  • используйте browseris.ie
  1. Браузер - это 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);
}

Ответ 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/