wake-up-neo.com

Zeigt eine Nachricht an, wenn der Browser nicht Internet Explorer 9 oder höher ist

Ich möchte meinen Benutzern eine Leiste zeigen, die folgendermaßen aussieht, wenn:

  1. Browser ist nicht IE; oder
  2. Browser ist IE, jedoch Version 8 oder früher

http://blog.integryst.com/webcenter-interaction/files/2011/10/ie9-support-confluence.png

(Beachten Sie, dass der Screenshot nur zur Veranschaulichung dient - IE 9 wird für meine Site unterstützt.)

Ich habe dieses Nice-jQuery-Plugin gefunden, möchte aber keine Popups verwenden.

http://jreject.turnwheel.com/

Die Website, auf der ich dies implementieren werde, ist eine Sharepoint 2013-Website. Daher werde ich einen Webpart für Inhaltseditor verwenden, um den von Ihnen bereitgestellten HTML-Inhalt einzuschließen. Die Leiste sollte an erster Stelle stehen.

Bitte fügen Sie CSS hinzu, wenn dies erforderlich ist, damit es als Screenshot angezeigt wird.

19
Luis Valencia

HTML

IE 9 und frühere Versionen (bis zu IE 4) lassen sich mithilfe von bedingte Kommentare in HTML identifizieren.

Wie @Jost notiert , könnten Sie sie verwenden, um IE Benutzer in IE 8 und früher zu warnen:

<!--[if lte IE 8]>
    BANNER HERE
<![endif]-->

Da IE 10 diese Unterstützung jedoch eingestellt hat, können Sie sie nicht verwenden, um Nicht-IE-Browser zu identifizieren.

jQuery

jQuery enthielt ein Browsererkennungsmodul ( $.browser ), aber wurde in jQuery 1.9 entfernt . Wenn Sie eine frühere Version von jQuery (z. B. 1.8.3 ) oder das jQuery Migrate-Plugin verwenden können, können Sie dies zum Anzeigen des Banners verwenden.

if ( !$.browser.msie || $.browser.version < 9 ) {
    // Add banner to the page here.
}

Browsererkennung im Allgemeinen

Bitte beachten Sie, dass die Browsererkennung schwierig ist. Es kommen ständig neue Browser heraus, sodass jedes Plug-In zur Unterstützung von Browsern schnell veraltet sein kann, ebenso wie die Voraussetzung, auf der Sie Ihre Warnmeldungen aufbauen. Die Browsererkennung von jQuery wurde am konsistentesten verwaltet, und selbst sie gaben am Ende auf.

Heutzutage wird von Web-Entwicklern im Allgemeinen erwartet, dass sie Code schreiben, der browserübergreifend funktioniert, und die Feature-Erkennung für Browser verwendet, die die von ihnen gewünschten Funktionen nicht unterstützen.

Wenn Sie auf einer SharePoint-Website arbeiten, ist dies vermutlich für interne Unternehmen gedacht und das Unternehmen ist Microsoft-zentriert. Es klingt, als würden Sie die Site für die Arbeit mit dem IE entwickeln und andere Browser während der Entwicklung ignorieren.

Wenn Sie davon ausgehen können, dass sich die meisten Benutzer auf einer IE-Version befinden, reicht möglicherweise die Warnung zum bedingten Kommentar aus.

12
Paul D. Waite

Ich fand die Frage interessant. Also habe ich ein Skript für mich ausgearbeitet, aber vielleicht kann jemand anderes davon profitieren. Deshalb habe ich es als Antwort gepostet. Es gibt ein Objekt mit Browser- und Betriebssysteminformationen zurück.

browser = {};
if (/Edge\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "Edge";
    browser.majorVersion = parseInt(/Edge\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /Edge\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/chrome\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "chrome";
    browser.majorVersion = parseInt(/chrome\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /chrome\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/firefox\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "firefox";
    browser.majorVersion = parseInt(/firefox\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /firefox\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/msie\ [0-9]{1}/i.test(navigator.userAgent)) {
    browser.agent = "msie";
    browser.majorVersion = parseInt(/MSIE\ ([0-9]{1})/i.exec(navigator.userAgent)[1]);
    browser.version = /MSIE\ ([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/opr\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "opera";
    browser.majorVersion = parseInt(/opr\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /opera\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/Trident\/[7]{1}/i.test(navigator.userAgent)) {
    browser.agent = "msie";
    browser.majorVersion = 11;
    browser.version = "11";
} else if (/Safari\/[0-9.]+/i.test(navigator.userAgent)) {
    browser.agent = "safari";
    browser.majorVersion = parseInt(/Version\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /Version\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else {
    browser.agent = false;
    browser.majorVersion = false;
    browser.version  = false;
}

if (/Windows\ NT/.test(navigator.userAgent)) {
    browser.os = "windows";
    var winver = parseFloat(/Windows\ NT\ ([0-9]{1,2}\.[0-9]{1})/i.exec(navigator.userAgent)[1]);
    switch(winver) {
    case 6.0:
        browser.osversion = "Vista";
        break;
    case 6.1:
        browser.osversion = "7";
        break;
    case 6.2:
        browser.osversion = "8";
        break;
    case 6.3:
        browser.osversion = "8.1";
        break;
    case 10.0:
        browser.osversion = "10";
        break;
    default:
        browser.osversion = false;
    }
} else if (/OS\ X\ /.test(navigator.userAgent)) {
    browser.os = "os x"; // 
    browser.osversion = /OS\ X\ [0-9]{2}_([0-9]{1,2})_[0-9]{1,2}/i.exec(navigator.userAgent)[1];
} else if (/(Linux)/.test(navigator.userAgent)) {
    browser.os = "linux";
    browser.osversion = false;
}
10
Dany

Überprüfen Sie, ob die Browser-Engine Trident 6+ (IE 9, 10, 11) ist ( 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;
  }
})();

Das Sniffing kann jedoch in der endgültigen oder zukünftigen Version von IE 11 durchbrechen, wenn sich Microsoft dazu entscheidet, userAgent string zu ändern.

2
Pavlo

EDIT: Dies antwortet direkt auf das OP.  

Ich habe Danys Antwort mit zwei Updates aktualisiert, die in (IE 6,7,8,9,10,11), Chrome und Edge getestet wurden. In erster Linie, weil die Updates in den Kommentaren sehr schwer zu lesen sind. 

  • Reines Javascript - keine jQuery erforderlich 
  • IE10 berichtet IE 10 vs IE 1
  • Dies meldet jetzt Edge
  • Keine spezifischen HTML-Elemente zum Vorbestehen erforderlich (außer einem Textkörper)
  • Getestet in IE6, IE7, IE8, IE9, IE11, Chrome v62 und Edge
  • TODO: Lass es in OSX Sierra und iPhone richtig funktionieren 

Der Test für Edge muss der erste sein, der behauptet, alles zu sein. : / 

All dies wird gesagt, Browser-Erkennung "ist was es ist" und wir können hoffen, dass die Notwendigkeit dafür bald verschwinden wird. 

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);
}
2
Joe Johnston

Sie könnten conditional compiling in Verbindung mit conditional comments verwenden.

Hier ein kurzer Überblick, wie das funktionieren könnte.

  1. Zeige immer die Bar
  2. Setzen Sie eine Flagge in Javascript. IEMinor=false
  3. Setzen Sie das Flag auf true, wenn IE <= 9, indem Sie ein Skript-Tag und bedingte Kommentare verwenden
  4. Verwenden Sie das bedingte Kompilieren, um die Leiste auszublenden, wenn @_jscript_version > 9(eigentlich nicht benötigt) und 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>

Ich war zu faul, um den Skripttyp hinzuzufügen ...

Hier ist ein Beispiel für JSBin , das die Leiste in IE 10+ (ungetestet) nicht anzeigt. Und zeigt es in anderen Fällen.

Hinweis: Ich habe es nicht genau so aussehen lassen wie auf dem Screenshot. Sie sollten dieses Teil zum Laufen bringen.

Bearbeiten: Der Browsermodus von IE zum Testen gegen IE <10 scheint zu funktionieren.
Edit2: Whoops, von dem ich dachte, dass IE9 nicht unterstützt wird, damit IE9 lte IE 9 in lt IE 9 und @_jscript_version > 9 in >= 9 ändern kann.

2
Moritz Roessler

Ich mag das einfache bedingte HTML. (Einfacher scheint immer besser.)

Eine weitere umfassendere JavaScript-Warnung finden Sie unter: http://www.browser-update.org

2
Heres2u

Eigentlich gibt es in SharePoint (das OP erwähnt) eine eingebaute Variable browseris . Es ist im globalen Fensterbereich verfügbar. Beantwortung der OP-Frage:

  1. Browser ist nicht IE;
  • verwenden Sie browseris.ie
  1. Browser ist IE, jedoch Version 8 oder früher
  • verwenden Sie browseris.ie8down

(getestet in SP2013 on-prem)

0
mctl87