Wie erkennt man, ob JavaScript deaktiviert ist?

Question

Es gab heute Morgen einen Beitrag, in dem gefragt wurde, wie viele Leute JavaScript deaktivieren. Dann fragte ich mich, welche Techniken verwendet werden könnten, um festzustellen, ob der Benutzer es deaktiviert hat.

Weiß jemand von einigen kurzen/einfachen Möglichkeiten, um festzustellen, ob JavaScript deaktiviert ist? Meine Absicht ist es, eine Warnung zu geben, dass die Website ohne aktiviertes JS nicht ordnungsgemäß funktionieren kann.

Letztendlich würde ich sie gerne zu Inhalten umleiten, die auch ohne JS funktionieren, aber ich benötige diese Erkennung als Platzhalter, um anzufangen.

Answer 1

Detektieren Sie in was? JavaScript? Das wäre unmöglich. Wenn Sie es nur für zu Protokollzwecken wollen, könnten Sie eine Art Tracking-Schema verwenden, bei dem jede Seite JavaScript enthält, das eine Anfrage für eine spezielle Ressource (wahrscheinlich ein sehr kleines gif oder ähnliches) macht. Auf diese Weise können Sie einfach die Differenz zwischen eindeutigen Seitenaufrufen und Anfragen nach Ihrer Tracking-Datei nehmen.

Answer 2

Einen Refresh im Meta-Tag innerhalb von Noscript hinzuzufügen ist keine gute Idee.

1. Weil das Noscript-Tag nicht XHTML-konform ist

2. Der Attributwert "Refresh" ist nicht standardisiert und sollte nicht verwendet werden. "Refresh" nimmt dem Benutzer die Kontrolle über eine Seite. Die Verwendung von "Refresh" führt zu einem Verstoß gegen die Web Content Accessibility Richtlinien des W3C --- Referenz http://www.w3schools.com/TAGS/att_meta_http_equiv.asp.

Answer 3

Hier ist ein PHP-Skript, das einmal vor der Generierung von Ausgaben eingebunden werden kann. Es ist nicht perfekt, aber es funktioniert in den meisten Fällen gut genug, um zu vermeiden, dass Inhalte oder Code geliefert werden, die vom Client nicht verwendet werden. Die Kopfkommentare erklären, wie es funktioniert.

        document.cookie = 'JS_ENABLED=1';
// location.reload verursacht in FireFox ein Bestätigungsfeld
//      if (document.cookie) { location.reload(true); }
        if (document.cookie) { location.href = location; }

        document.getElementById('formid').submit();

Answer 4

Hier ist der Kniff! Es könnten Client-Browser mit aktiviertem Javascript und die JS-kompatible Browser verwenden. Aber aus irgendeinem Grund funktioniert Javascript im Browser nicht (z. B. Firewall-Einstellungen). Laut Statistik passiert dies in jedem 93. Szenario. Also erkennt der Server, dass der Client in der Lage ist, Javascript auszuführen, aber in Wirklichkeit funktioniert es nicht!

Als Lösung schlage ich vor, dass wir auf der Client-Seite ein Cookie setzen und es vom Server aus lesen. Wenn das Cookie gesetzt ist, funktioniert JS einwandfrei. Irgendwelche Gedanken?

Answer 5

Natürlich sind Cookies und HTTP-Header großartige Lösungen, aber beide erfordern eine explizite serverseitige Beteiligung.

Für einfache Websites oder wenn ich keinen Zugriff auf das Backend habe, ziehe ich clientseitige Lösungen vor.

--

Ich verwende das Folgende, um dem HTML-Element selbst ein Klassenattribut zuzuweisen, sodass mein CSS so ziemlich alle anderen Anzeigelogik behandeln kann.

METHODEN:

1) Platzieren Sie document.getElementsByTagName('html')[0].classList.add('js-enabled'); über dem -Element.

WARNUNG!!!! Diese Methode überschreibt alle Klassenattribute von , ganz zu schweigen davon, dass es möglicherweise kein "gültiges" HTML ist, jedoch in allen Browsern funktioniert, in denen ich es getestet habe.

*HINWEISE: Aufgrund des Zeitpunkts, zu dem das Skript ausgeführt wird, bevor das -Tag verarbeitet wird, wird ein leeres classList-Array ohne Knoten erstellt. Wenn das Skript abgeschlossen ist, erhält das -Element nur die von Ihnen hinzugefügten Klassen.

2) Erhalten Sie alle anderen -Klassenattribute, indem Sie das Skript einfach direkt nach dem Öffnen des -Tags platzieren.

In beiden Fällen werden bei deaktiviertem JS keine Änderungen an den -Klassenattributen vorgenommen.

ALTERNATIVEN

Über die Jahre habe ich ein paar andere Methoden verwendet:

    <!-- 
        (function(d, a, b){ 
            let x = function(){
                // Auswählen und austauschen
                let hits = d.getElementsByClassName(a);
                for( let i = hits.length - 1; i >= 0; i-- ){
                    hits[i].classList.add(b);
                    hits[i].classList.remove(a);
                }
            };
            // Initialisierung Zweite Durchlauf...
            setTimeout(function(){ x(); },0);
            x();
        })(document, 'no-js', 'js-enabled' );
    -->

// Minifiziert als:

    <!-- 
        (function(d, a, b, x, hits, i){x=function(){hits=d.getElementsByClassName(a);for(i=hits.length-1;i>=0;i--){hits[i].classList.add(b);hits[i].classList.remove(a);}};setTimeout(function(){ x(); },0);x();})(document, 'no-js', 'js-enabled' );
    -->

• Dies durchläuft die Seite zweimal, einmal an der Stelle, an der es auf der Seite ist, normalerweise direkt nach dem -Tag und einmal nach dem Laden der Seite. Zwei Durchläufe waren erforderlich, da ich es in eine header.tpl-Datei eines CMS eingefügt habe, auf das ich keinen Backend-Zugriff hatte, aber Styling-Optionen für no-js-Schnipsel anzeigen wollte.

Der erste Durchlauf würde die .js-enabled-Klasse setzen, um globale Styles zu ermöglichen und die meisten weiteren Neulayouts zu verhindern. Der zweite Durchlauf war eine Auffanglösung für später eingefügten Inhalt.

BEGRÜNDUNGEN:

Die Hauptgründe, warum mir wichtig war, ob JS aktiviert war oder nicht, waren "Styling"-Zwecke, das Ausblenden/Einblenden eines Formulars, das Aktivieren/Deaktivieren von Schaltflächen oder das Neugestalten von Präsentationen und Layouts von Slidern, Tabellen und anderen Darstellungen, die JS benötigten, um "korrekt" zu funktionieren und ohne JS nutzlos oder unbrauchbar wären, um Animationen durchzuführen oder die Interaktionen zu handhaben.

Außerdem können Sie mit JavaScript nicht direkt feststellen, ob JavaScript "deaktiviert" ist... nur ob es "aktiviert" ist, indem Sie JavaScript ausführen, sodass Sie sich entweder auf verlassen oder sich darauf verlassen können, dass CSS die Styles umschaltet und falls JavaScript ausgeführt wird, in den "js-enabled"-Modus wechselt.