Alte IE < 11 und nicht ES5 fähige Browser ausschließen

[Elma]

Moin.

Ich arbeite für mein Projekt ja auf Browserseite nach dem Java Script Standard ES5.

ES 6 Features, die laut dieser Tabelle ECMAScript 6 compatibility table auch shcon auf IE11 unterstützt werden, können auch benutzt werden.
Wie z.B. const oder let.

Wenn nun jemand mit einem älteren Browser kommt, führt das aber zu Fehlern.
Ich will nun aber auch nicht massenhaft Feature Detections und Polyfills einbauen.

Sondern es soll eine zentrale Prüfung erfolgen.
Wenn es ein Browser älter als IE11 ist, oder falls nicht IE, ein Browser, der nicht ES5 unterstützt, soll eine Fehlermeldung ausgegeben werden und mit Ausführung meines Java Scripts erst gar nicht begonnen werden. Solche Browser werden dann so behandelt, als ob der User JS deaktiviert hätte. Sprich: Kein Login möglich, nur statische Seiten können gelesen werden.

Ich hab mein Script ja in einer Self invoking Funktion gekapselt. Statt selbstausführend könnte ich einfach diese kurze Prüfung vorschalten, die dann entweder aufruft oder nicht.

Auf CSS Ebene habe ich über "Media Querys" auch eine ausreichende Weiche drin. Wenn keine Media Querys unterstützt werden, landet der Browser auf dem Basis-Layout, welches in etwa dem XS-Mobile Layout entspricht. Das ist so abgespeckt, dass sogar der IE5.5 noch damit klar käme.


Also, gibt es irgendwie eine schnelle Möglichkeit, herauszufinden, welche JS Version der Browser unterstützt, die auch nicht von irgendwelchen Privacy Tools oder Einstellungen verbogen wird?

- - - Aktualisiert - - -

So, ich hab mal ein paar Kompatibilitätslisten durch gesehen.

Wenn ich einfach prüfe, ob let unterstützt wird, wäre ich etwa da, wo ich hin will, ohne massenhaft Features abzufragen.
Let ist nur bei hinreichend modernen Browsern verfügbar, aber der IE11 ist noch mit im Boot.

Wenn kein Let unterstützt wird, wird mein JS gleich zu beginn abgebrochen, und der Browser wird so behandelt, als sei JS vom User deaktiviert worden.

Damit wären alle alten Gurken schonmal so weit draußen, dass sie nur statische Seiten lesen können, und den internen Bereich mit dem Chat erst gar nicht betreten können.
Somit brauch ich dann beim Programmieren auf diese alten Gurken keine Rücksicht zu nehmen und ich könnte auch bedenkenlos auf LET statt VAR umschwenken.

- - - Aktualisiert - - -

Also ich versuche gerade folgendes:

Ich versuche, eine Variable per let zu deklarieren und per Object.create(null) ein Objekt darauf zu erstellen.
Damit möchte ich testen, ob das Schlüsselwort let unterstützt wird, und ob Object.create funktioniert.
Das ganze habe ich in einen Try ... Catch Block gesetzt.

Alte Internet Explorer Versionen melden trotzdem einen Fehler:
IE10: Syntaxfehler, ältere Versionen: ; erwartet.

try {
let testObj=Object.create(null);
}
catch(err) {
    console.log(err);
}
finally {
    console.log("blubb");
}

Wie könnte man testweise ein "Let" und Object.create nutzen in alten Browsern? Ohne dass ein Syntaxfehler mit Scriptabbruch auftritt, so dass man noch eine schöne selbstgeschriebene Fehlermeldung (a la Dein Browser ist zu alt) vorher absetzen kann?

 

[andreax]

Hier ein Auszug aus Wikipedia https://de.wikipedia.org/wiki/Conditional_Comments
nur für IE

<script type="text/javascript">
 /*@cc_on @*/
 /*@if (@_jscript_version >= 5.5)
     // dieser Bereich ist für jscript-Interpreter >= v5.5 sichtbar
 @else @*/
     // dieser Bereich wird alternativ dazu ausgeführt
 /*@end @*/
 </script>

 

[Elma]

AW: Alte IE &lt; 11 und nicht ES5 fähige Browser ausschließen

Danke für den Hinweis mit Conditional Comments. Das werde ich auch noch einbinden.
Meine bisherige Lösung sieht wie folgt aus:

//V: 0.1
//Dieses Script soll testen, ob strict mode, let und Object.create nutzbar ist, 
//um eine Browserweiche zwischen aktuellen Browsern und alten Browsern zu erhalten.

"use strict";

function testBrowser() {
    //Testen, ob "this" im Function Scope undefined ist, um von ES5 Strict Mode Support auszugehen.
    if (typeof(this)==="undefined") { 
        // Testen, ob let und Object.create funktioniert.
        // Muss in eval stehen, damit alte Browser keinen Syntax Error trotz try...catch melden
        try {
            eval("let testObj=Object.create(null);");
            return true;
        }
        catch(err) {
            return false;
        }
    }
    else return false;
}

if (testBrowser() === true) {
    //main script aufrufen
} else {
    //Fehlermeldung in Info Div ausgeben 
    document.getElementById("info").innerHTML="Your Browser or JavaScript version is not supported :( "; 
}

Diese Browserweiche soll dann das Main Script nachladen oder eben nur eine Fehlermeldung anzeigen, so dass die Seite dann komplett ohne JavaScript Komponenten genutzt werden muss.

Möglicherweise mache ich es auch noch so, dass ich mich bei CSS nicht nur auf Media Querys als "Weiche" verlasse, sondern bestimmte Teile vom CSS auch erst über JS hinter der Browser Weiche einbinde, damit ich im Bereich CSS weniger Vendor Prefixes brauche. (Wenn der Browser let kann, kann er auch das meißte aus CSS3 ohne Vendor Prefix)
Ohne JS ist die Seite bis auf statische Inhalte sowieso nicht nutzbar.
Oder hätte das irgendwelche Nachteile, die Seite erst mal mit dem Basis CSS auszuliefern und das CSS3 template per JS nachzuladen? (Suchmaschinen o.ä)

LG

- - - Aktualisiert - - -

So, hier mal ein Update mit conditional compilation, um IE älter als 11 gleich ohne weitere Prüfung als Untauglich zu erklären. Bei allen anderen Browsern wird nach wie vor geprüft, ob let, Object.create t und Strict Mode funktioniert.

//V: 0.1-1
//Dieses Script soll testen, ob strict mode, let und Object.create nutzbar ist, 
//um eine Browserweiche zwischen aktuellen Browsern und alten Browsern zu erhalten.

"use strict";

function testBrowser() {
    // Testen, ob Internet Explorer < 11. 
    //In IE11 wurde der support fuer conditional compilation entfernt, so dass nur alte IE reagieren.
    /*@cc_on return false @*/

    //Testen, ob "this" im Function Scope undefined ist, um von ES5 Strict Mode Support auszugehen.
    if (typeof(this)==="undefined") { 
        // Testen, ob let und Object.create funktioniert.
        // Muss in eval stehen, damit alte Browser keinen Syntax Error trotz try...catch melden
        try {
            eval("let testObj=Object.create(null);");
            return true;
        }
        catch(err) {
            return false;
        }
    }
    else return false;
}

if (testBrowser() === true) {
    //modernes CSS3 Template einbinden
    //main script aufrufen
} else {
    //Fehlermeldung in Info Div ausgeben und Seite nur mit dem Basis CSS anzeigen. 
    document.getElementById("info").innerHTML="Your Browser or JavaScript version is not supported :( "; 
}