Wie erkenne ich, ob JavaScript deaktiviert ist?

658

Heute Morgen wurde in einem Post gefragt, wie viele Personen JavaScript deaktivieren. Dann begann ich mich zu fragen, welche Techniken verwendet werden könnten, um festzustellen, ob der Benutzer sie deaktiviert hat.

Kennt jemand einige kurze / einfache Möglichkeiten, um festzustellen, ob JavaScript deaktiviert ist? Ich möchte Sie warnen, dass die Site nicht ordnungsgemäß funktioniert, ohne dass der Browser JS aktiviert hat.

Schließlich möchte ich sie zu Inhalten umleiten, die ohne JS funktionieren können, aber ich benötige diese Erkennung als Platzhalter, um zu beginnen.

MikeJ
quelle
Was möchten Sie mit diesen Informationen tun? Dies könnte die Antwort ändern, die Sie erhalten - z. B. sollte eine progressive Verbesserung im Allgemeinen dem Versuch vorgezogen werden, zu erkennen, dass JavaScript deaktiviert ist, und darauf basierend bestimmte Maßnahmen ergreifen.
Jonny Buchanan
progressive Verbesserung ist das, wonach ich suche. Ich möchte nicht in der Lage sein, sie auf alternative Inhalte umzuleiten, die in Abwesenheit einer JS-Aktivierung oder eines fähigen Browsers ordnungsgemäß funktionieren.
MikeJ
1
@expiredninja Dieser Beitrag von Nicholas Zakas sagt ungefähr 2%, obwohl er über ein Jahr alt ist.
sdleihssirhc
Der einfachste Weg ist, Noscript zu verwenden, um eine nicht-Javascript-Site anzuzeigen, und Javascript zu verwenden, um alle Javascript-abhängigen Elemente anzuzeigen, indem die Stilanzeige geändert wird.
Myforwik

Antworten:

285

Ich gehe davon aus, dass Sie versuchen zu entscheiden, ob Sie JavaScript-erweiterte Inhalte bereitstellen möchten oder nicht. Die besten Implementierungen werden sauber abgebaut, sodass die Site weiterhin ohne JavaScript funktioniert. Ich gehe auch davon aus, dass Sie die serverseitige Erkennung meinen , anstatt das <noscript>Element aus einem ungeklärten Grund zu verwenden.

Es gibt keine gute Möglichkeit, eine serverseitige JavaScript-Erkennung durchzuführen. Alternativ ist es möglich, ein Cookie mit JavaScript zu setzen und dieses Cookie dann bei nachfolgenden Seitenaufrufen mithilfe von serverseitigem Scripting zu testen. Dies wäre jedoch nicht geeignet, um zu entscheiden, welche Inhalte bereitgestellt werden sollen, da Besucher ohne das Cookie nicht von neuen Besuchern oder Besuchern, die Cookies blockieren, unterschieden werden können.

ashleedawg
quelle
129
<noscript> IST die semantisch genaueste Methode, um Nicht-Javascript-Inhalte anzugeben. Statt zu erkennen, ob Javascript deaktiviert ist, sollten Sie feststellen, ob es aktiviert ist. Zeigen Sie daher standardmäßig die Meldung "Sie benötigen Javascript, um meine Website ordnungsgemäß zu verwenden" an, verbergen Sie sie jedoch sofort beim Laden mit einer Javascript-Funktion.
Matt Lohkamp
58
@matt lohkamp: Oder sogar die Nachricht standardmäßig ausblenden und einen <style>Block in das <noscript>zum Einblenden einfügen (kein Reflow dort, wenn JS aktiviert ist). Überraschenderweise funktioniert dies in allen modernen Browsern und sogar in IE6
Piskvor verließ das Gebäude
7
@matt - Ich habe dies eine Weile getan, aber die Nachricht bleibt bei langsamen Verbindungen eine Weile aktiv, sodass die Benutzer verwirrt sind. Ich bin hier auf der Suche nach einer anderen Lösung. @Piskvor - Das <noscript> -Tag im Header wird nicht validiert, und ein <style> -Tag im Body wird nicht validiert.
Ben
20
... außer warum beschäftigen Sie sich mit Validierung? Validieren Sie nur, um zu validieren? Es ist vielleicht nicht "richtig", aber wenn es funktioniert und es "mit etwas Schmutz unter der Haube" erreicht, was ist das Problem? Mach dir keine Sorgen, ich werde nicht beurteilen ;-)
keif
4
Es bleibt gültig, wenn Sie nur das style-Attribut für die angegebenen Elemente in den <noscript> -Tags verwenden (wie <noscript> <div style = "color: red;"> blahblah </ div> </ noscript> oder sg. Ähnlich). . ABER es bleibt auch gültig, wenn Sie den <style> BLOCK normalerweise in die Kopfzeile einfügen, die den Stil einiger .noscript (oder ähnlicher) klassifizierter Elemente definiert, und im Textkörper innerhalb der <noscript> -Tags geben Sie einfach den angegebenen Elementen das zuvor definierte .noscript-Klasse, wie folgt: <noscript> <div class = "noscript"> blahblah </ div> </ noscript>
Sk8erPeter
359

Ich möchte hier meine .02 hinzufügen. Es ist nicht 100% kugelsicher, aber ich denke, es ist gut genug.

Das Problem für mich mit dem bevorzugten Beispiel für die Meldung "Diese Site funktioniert ohne Javascript nicht so gut" ist, dass Sie dann sicherstellen müssen, dass Ihre Site ohne Javascript einwandfrei funktioniert. Und sobald Sie diesen Weg eingeschlagen haben, stellen Sie fest, dass die Site bei deaktiviertem JS kugelsicher sein sollte, und das ist ein großer Teil der zusätzlichen Arbeit.

Was Sie also wirklich wollen, ist eine "Umleitung" zu einer Seite mit der Aufschrift "JS einschalten, dumm". Aber natürlich können Sie Meta-Weiterleitungen nicht zuverlässig durchführen. Also, hier ist der Vorschlag:

<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    You don't have javascript enabled.  Good luck with that.
    </div>
</noscript>

... wo der gesamte Inhalt Ihrer Website mit einem Div der Klasse "pagecontainer" umschlossen ist. Das CSS im Noscript-Tag verbirgt dann den gesamten Seiteninhalt und zeigt stattdessen die Meldung "kein JS" an, die Sie anzeigen möchten. Dies scheint Google Mail tatsächlich zu tun ... und wenn es für Google gut genug ist, ist es für meine kleine Website gut genug.

Hairbo
quelle
12
@steve jemals versucht, google.com zu validieren? Die Validierung bestimmt lediglich, wie genau das Dokument dem Datenblatt folgt. Dies hat keinerlei Auswirkungen auf die Benutzerfreundlichkeit der Seite.
JKirchartz
71
@JonasGeiregat Was ist falsch daran, den Benutzer zu zwingen, Javascript zu benötigen, wenn Ihre Web-App erstellt wurde - und Javascript benötigt, um zu funktionieren? Ich höre diesen Kommentar zu oft, aber er gilt nur für die einfachsten Websites. Probieren Sie Facebook ohne JS aus und sehen Sie, was passiert. Wenn Ihre App für Javascript erstellt wurde, was ist dann falsch daran, zu verlangen, was 99% der Benutzer sowieso aktiviert haben?
Lee Benson
18
@Lee trifft es auf den Nagel, Sie können nur so viel für den Benutzer tun, bevor Sie die Grenze zu dem ziehen, was Sie unterstützen werden. Wir erwarten von allen Benutzern ein internetfähiges Gerät. Sollte ich auch eine Papierversion meiner Website für diejenigen implementieren, die den Zugriff auf das Internet verweigern?
Kolors
14
@Kolors, ich habe diesen Kommentar bereits im März 2012 abgegeben und ich würde argumentieren, dass er heute doppelt wahr ist. Seitdem haben wir Meteor, Angular.Js, Famo.us und eine Menge erstaunlicher Bibliotheken, für deren Start Javascript erforderlich ist . Ich frage mich, was Benutzer, die JS deaktivieren möchten, tatsächlich erreichen wollen ... klar, sie surfen nicht im selben Web wie der Rest von uns, und es gibt keinen Grund, warum ein Unternehmen seine Website auf das kleinste Maß verkleinern sollte Untergruppe hartnäckiger Benutzer ...
Lee Benson
6
Ja, und ich habe mich gefragt, warum ich Ihre Antwort nicht positiv bewerten konnte, da ich vergessen habe, mein JS zu aktivieren :-)) Ich mag und implementiere Ihre Lösung! Vielen Dank!
Garavani
198

noscript Blöcke werden ausgeführt, wenn JavaScript deaktiviert ist, und werden normalerweise verwendet, um alternative Inhalte zu den in JavaScript generierten anzuzeigen, z

<script type="javascript">
    ... construction of ajaxy-link,  setting of "js-enabled" cookie flag, etc..
</script>
<noscript>
    <a href="next_page.php?nojs=1">Next Page</a>
</noscript>

Benutzer ohne js erhalten den next_pageLink - Sie können hier Parameter hinzufügen, damit Sie auf der nächsten Seite wissen, ob sie über einen JS / Nicht-JS-Link gekommen sind, oder versuchen, ein Cookie über JS zu setzen, dessen Fehlen JS impliziert ist behindert. Beide Beispiele sind ziemlich trivial und offen für Manipulationen, aber Sie haben die Idee.

Wenn Sie eine rein statistische Vorstellung davon haben möchten, wie viele Ihrer Benutzer Javascript deaktiviert haben, können Sie Folgendes tun:

<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>

Überprüfen Sie dann Ihre Zugriffsprotokolle, um festzustellen, wie oft dieses Bild getroffen wurde. Eine etwas grobe Lösung, die Ihnen jedoch prozentual eine gute Idee für Ihre Benutzerbasis gibt.

Der obige Ansatz (Bildverfolgung) funktioniert nicht gut für Nur-Text-Browser oder solche, die js überhaupt nicht unterstützen. Wenn Ihre Benutzerbasis also hauptsächlich in Richtung dieses Bereichs schwingt, ist dies möglicherweise nicht der beste Ansatz.

ConroyP
quelle
7
Das ist nicht sehr effektiv. Zum Beispiel zählt niemand mit Nur-Text-Browsern, die normalerweise keine JavaScript-Unterstützung haben. Zumindest sollten Sie das Caching für dieses Bild deaktivieren.
Jim
3
Würden Browser, die JS überhaupt nicht unterstützen, das Noscript-Tag nicht einfach ignorieren und das Bild anzeigen?
LKM
1
@LKM: Hängt davon ab, wie sie geschrieben sind, höchstwahrscheinlich würden sie es tun, also würden Sie es zu einem 1x1px-Punkt machen. Diese Option dient hauptsächlich zur serverseitigen Verfolgung von Nutzungsmustern und ist daher weiterhin in Ordnung, da sie von einem Benutzer ohne Javascript-Funktion ausgelöst wird.
ConroyP
Beachten Sie, dass es derzeit einen Fehler mit IE8 und dem Noscript-Tag gibt, wenn Sie es stylen ... siehe positioniseverything.net/explorer.html
alex
2
Sie können dieses Image auch als serverseitiges Skript bereitstellen, den MIME
JKirchartz
46

Dies hat bei mir funktioniert: Es leitet einen Besucher weiter, wenn Javascript deaktiviert ist

<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>
Ernie13
quelle
6
Dies ist ungültig. Noscript-Elemente dürfen keine Meta-Elemente enthalten. Ich würde nicht darauf vertrauen, dass dies in allen Browsern zuverlässig funktioniert (einschließlich zukünftiger Browser, in denen Sie derzeit nicht testen können), da diese die Fehlerbehebung auf unterschiedliche Weise durchführen können.
Quentin
15
Dies mag ungültig sein, aber sehen Sie sich den Code von Facebook an. Er verwendet dieselbe Lösung im Teil <head> - was nicht bedeutet, dass es eine sehr gute Lösung ist, da der Code von Facebook weit von einem gültigen Code entfernt ist, ABER es kann bedeuten, dass dies der Fall ist funktioniert mit dem Browser vieler Benutzer, was ein wichtiger Aspekt sein kann. Aber es ist wahr, dass es nicht wirklich vorgeschlagen wird. Dies ist ihr Code: <noscript> <meta http-equiv = refresh content = "0; URL = / about / messages /? _ Fb_noscript = 1" /> </ noscript>
Sk8erPeter
IE9 hat (zumindest) die Einstellung "META REFRESH zulassen". Ich scheine nicht viele, die es ausschalten, aber vermutlich diejenigen, die Javascript nicht mögen, aber wenn Sie 100% wollen, ist es das nicht.
Jenson-Button-Event
Es ist gültig in HTML5.
Naszta
1
Dies zerstört den Link beim Versuch, auf Linkedin zu teilen, wir haben den schwierigen Weg gefunden ... das ist keine gute Idee. Da LinkedIn der Meta-Aktualisierung folgt, werden Og-Tags usw. nicht
berücksichtigt
44

Wenn Ihr Anwendungsfall darin besteht, dass Sie über ein Formular (z. B. ein Anmeldeformular) verfügen und Ihr serverseitiges Skript wissen muss, ob für den Benutzer JavaScript aktiviert ist, können Sie Folgendes tun:

<form onsubmit="this.js_enabled.value=1;return true;">
    <input type="hidden" name="js_enabled" value="0">
    <input type="submit" value="go">
</form>

Dadurch wird der Wert von js_enabled vor dem Absenden des Formulars auf 1 geändert. Wenn Ihr serverseitiges Skript eine 0 erhält, keine JS. Wenn es eine 1 bekommt, JS!

Andrew Hedges
quelle
44

Ich würde vorschlagen, dass Sie umgekehrt vorgehen, indem Sie unauffälliges JavaScript schreiben.

Stellen Sie sicher, dass die Funktionen Ihres Projekts für Benutzer mit deaktiviertem JavaScript funktionieren, und implementieren Sie anschließend Ihre Verbesserungen der JavaScript-Benutzeroberfläche.

https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

Roosteronsäure
quelle
145
Das Leben ist zu kurz. Es ist 2012
Aktivieren
25
"Das Leben ist zu kurz. Es ist 2012 - Aktiviere Javascript oder gehe nach Hause!" ist die perfekte kleine Nachricht, die angezeigt wird, wenn kein JS vorhanden ist. angemeldet, nur um Ihnen zu sagen, dass @Yarin
5
Ich habe mich auch gerade angemeldet, um zu sagen, dass das FANTASTISCH ist! @ Yarin. Ich mache eine kleine Site, die nicht allgemein öffentlich ist (wie ein Intranet, aber für Freunde, die zusammenkommen, um an einem Projekt zu arbeiten). Ich mache es zu einem SPA und mache mir nicht die Mühe, einen Fallback zu machen. Unauffälliges JavaScript würde die Arbeitsbelastung, die ich in das SPA-Konzept stecke, fast verdoppeln. Bei modernen Javascript-Bibliotheken wie Knockout, Jquery und anderen müssen wir einfach akzeptieren, dass nicht jede Site leicht "unauffällig" gemacht werden kann. Javascript ist die Zukunft des Webs.
Lassombra
5
@Yarin Ich baue PHP / JS-Apps für meinen Lebensunterhalt, die ich nie in Fallbacks gesteckt habe ... Wenn es für jemanden nicht funktioniert, kontaktieren sie mich und ich sage ihnen, sie sollen aufhören, in der Vergangenheit zu leben und JS aktivieren.
Sam
2
@ n611x007 - Unethische Dinge verbergen sich in jedem Code, auf jedem Gerät, egal ob Server- oder Client-Seite. Es ist kein Fehler, sein Mensch ist schuld. Ich finde eine Kampagne gegen JS ironisch, weil Sie immer noch einen ISP eines Drittanbieters verwenden, um eine Verbindung zum Internet herzustellen, immer noch einen Computer mit Hardware / Firmware von Drittanbietern verwenden, immer noch unsichere Mobilfunknetze verwenden, auf die durch Injektionen von Drittanbietern zugegriffen werden kann, und immer noch ein Mobiltelefon besitzen, das verwendet Wenn Sie ein nicht gepatchtes Betriebssystem eines Drittanbieters verwenden, verwenden Sie weiterhin einen Flachbildfernseher, der einen weit geöffneten Update-Dienst eines Drittanbieters usw. verwendet. Sie sind immer Opfer von MITM-Kanälen, unabhängig davon, ob Sie JS in Ihrem Browser deaktivieren.
Dhaupin
35

<noscript>ist nicht einmal notwendig und wird in XHTML nicht unterstützt .

Arbeitsbeispiel :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>My website</title>
    <style>
      #site {
          display: none;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js "></script>
    <script>
      $(document).ready(function() {
          $("#noJS").hide();
          $("#site").show();
      });
    </script>
</head>
<body>
    <div id="noJS">Please enable JavaScript...</div>
    <div id="site">JavaScript dependent content here...</div>
</body>
</html>

Wenn in diesem Beispiel JavaScript aktiviert ist, wird die Site angezeigt. Wenn nicht, wird die Meldung "Bitte JavaScript aktivieren" angezeigt. Der beste Weg, um zu testen, ob JavaScript aktiviert ist, besteht darin, einfach zu versuchen, JavaScript zu verwenden! Wenn es funktioniert, ist es aktiviert, wenn nicht, dann ist es nicht ...

de Raad
quelle
1
Ha, XHTML. Das waren die Tage ... Die Dinge haben sich sehr verändert: developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
Stephan Weinhold
warum jquery verwenden ...
Luis Villavicencio
@StephanWeinhold, JSF verwendet XHTML.
Arash
34

Verwenden Sie eine .no-js-Klasse für den Body und erstellen Sie Nicht-Javascript-Stile basierend auf der übergeordneten .no-js-Klasse. Wenn Javascript deaktiviert ist, erhalten Sie alle Nicht-Javascript-Stile. Wenn JS-Unterstützung vorhanden ist, wird die .no-js-Klasse ersetzt, sodass Sie alle Stile wie gewohnt erhalten.

 document.body.className = document.body.className.replace("no-js","js");

Trick in HTML5 Boilerplate http://html5boilerplate.com/ durch modernizr verwendet, aber Sie können eine Zeile Javascript verwenden, um die Klassen zu ersetzen

Noscript-Tags sind in Ordnung, aber warum sollten Sie zusätzliche Inhalte in Ihrem HTML-Code haben, wenn dies mit CSS möglich ist?

Grundizer
quelle
5
Ich kann nicht glauben, dass es so lange gedauert hat, bis jemand die .nojsKlasse erwähnt hat! Dies ist einer der nahtlosesten Ansätze und noscriptbeschämt.
Moses
15

nur ein bisschen hart aber (Hairbo brachte mich auf die Idee)

CSS:

.pagecontainer {
  display: none;
}

JS:

function load() {
  document.getElementById('noscriptmsg').style.display = "none";
  document.getElementById('load').style.display = "block";
  /* rest of js*/
}

HTML:

<body onload="load();">

  <div class="pagecontainer" id="load">
    Page loading....
  </div>
  <div id="noscriptmsg">
    You don't have javascript enabled. Good luck with that.
  </div>

</body>

würde auf jeden fall funktionieren oder? Selbst wenn das Noscript-Tag nicht unterstützt wird (nur einige CSS erforderlich), kennt jemand eine Nicht-CSS-Lösung?

Borrel
quelle
13

Sie können ein einfaches JS-Snippet verwenden, um den Wert eines ausgeblendeten Felds festzulegen. Wenn Sie zurückgeschickt werden, wissen Sie, ob JS aktiviert war oder nicht.

Oder Sie können versuchen, ein Popup-Fenster zu öffnen, das Sie schnell schließen (das aber möglicherweise sichtbar ist).

Außerdem haben Sie das NOSCRIPT-Tag, mit dem Sie Text für Browser mit deaktiviertem JS anzeigen können.

rslite
quelle
Dies ist keine gute Antwort. Die erste Lösung erfordert ein erneutes Laden der Seite und das Senden eines Formulars. Die zweite Lösung öffnet ein Popup (ack!) Und schließt es "schnell" - von der Client-Seite? -1
Ben
Manchmal müssen Sie serverseitig wissen, ob für eine Site JS aktiviert ist oder nicht. Daher sehe ich nicht, wie Sie dies tun können, außer etwas zurückzusenden. Stimmen Sie zu, dass ein Popup hässlich ist, und ich bin mir nicht sicher, aber es sollte möglich sein, ein Popup außerhalb des sichtbaren Bereichs des Bildschirms zu öffnen, damit der Benutzer nicht davon gestört wird. Nicht elegant, aber es funktioniert und es gibt kein erneutes Laden der Seite.
Rslite
Spambots posten auch in einem versteckten Feld.
Janis Veinbergs
13

Sie sollten sich das Noscript-Tag ansehen.

<script type="text/javascript">
...some javascript script to insert data...
</script>
<noscript>
   <p>Access the <a href="http://someplace.com/data">data.</a></p>
</noscript>
anon
quelle
12

Das Noscript-Tag funktioniert gut, erfordert jedoch jede zusätzliche Seitenanforderung, um weiterhin nutzlose JS-Dateien bereitzustellen, da Noscript im Wesentlichen eine clientseitige Überprüfung ist.

Sie könnten mit JS ein Cookie setzen, aber wie jemand anderes betonte, könnte dies fehlschlagen. Idealerweise möchten Sie in der Lage sein, die JS-Clientseite zu erkennen und ohne Verwendung von Cookies eine Sitzungsserverseite für diesen Benutzer festzulegen, die angibt, dass JS aktiviert ist.

Eine Möglichkeit besteht darin, ein 1x1-Bild mithilfe von JavaScript dynamisch hinzuzufügen, wobei das src-Attribut tatsächlich ein serverseitiges Skript ist. Dieses Skript speichert lediglich in der aktuellen Benutzersitzung, in der JS aktiviert ist ($ _SESSION ['js_enabled']). Sie können dann ein 1x1 leeres Bild zurück an den Browser ausgeben. Das Skript wird nicht für Benutzer ausgeführt, für die JS deaktiviert ist, und daher wird $ _SESSION ['js_enabled'] nicht festgelegt. Für weitere Seiten, die diesem Benutzer bereitgestellt werden, können Sie entscheiden, ob Sie alle Ihre externen JS-Dateien einschließen möchten. Sie sollten jedoch immer die Prüfung einschließen, da einige Ihrer Benutzer möglicherweise das NoScript Firefox-Add-On verwenden oder über JS verfügen aus einem anderen Grund vorübergehend deaktiviert.

Sie sollten diese Prüfung wahrscheinlich irgendwo am Ende Ihrer Seite einfügen, damit die zusätzliche HTTP-Anforderung das Rendern Ihrer Seite nicht verlangsamt.

David Wees
quelle
12

Fügen Sie dies dem HEAD-Tag jeder Seite hinzu.

<noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>

Also hast du:

<head>
    <noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
    </noscript>
</head>

Mit Dank an Jay.

the_seeker_who
quelle
12

Da ich dem Browser immer etwas geben möchte, das sich lohnt, verwende ich oft diesen Trick:

Erstens ist jeder Teil einer Seite, für dessen ordnungsgemäße Ausführung JavaScript erforderlich ist (einschließlich passiver HTML-Elemente, die durch getElementById-Aufrufe usw. geändert werden), so konzipiert, dass er unverändert verwendet werden kann, unter der Annahme, dass kein JavaScript verfügbar ist. (entworfen, als ob es nicht da wäre)

Alle Elemente, die JavaScript erfordern würden, platziere ich in einem Tag wie:

<span name="jsOnly" style="display: none;"></span>

Dann benutze ich am Anfang meines Dokuments .onloadoder document.readyinnerhalb einer Schleife von getElementsByName('jsOnly'), um das .style.display = "";Einschalten der JS-abhängigen Elemente wieder einzuschalten. Auf diese Weise müssen Nicht-JS-Browser niemals die JS-abhängigen Teile der Site sehen, und wenn sie diese haben, wird sie sofort angezeigt, wenn sie fertig sind.

Sobald Sie an diese Methode gewöhnt sind, ist es ziemlich einfach, Ihren Code zu hybridisieren, um beide Situationen zu bewältigen, obwohl ich erst jetzt mit dem noscriptTag experimentiere und erwarte, dass es einige zusätzliche Vorteile hat.

Brian
quelle
10

Dies ist die "sauberste" Lösungs-ID:

<noscript>
    <style>
        body *{ /*hides all elements inside the body*/
            display: none;
        }
        h1{ /* even if this h1 is inside head tags it will be first hidden, so we have to display it again after all body elements are hidden*/
            display: block;
        }
    </style>
    <h1>JavaScript is not enabled, please check your browser settings.</h1>
</noscript>
Alpha2k
quelle
9

Eine übliche Lösung besteht darin, das Meta-Tag in Verbindung mit Noscript zu aktualisieren, um die Seite zu aktualisieren und den Server zu benachrichtigen, wenn JavaScript deaktiviert ist.

<!DOCTYPE html>
<html lang="en">
    <head>
        <noscript>
            <meta http-equiv="refresh" content="0; /?javascript=false">
        </noscript>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
</html>

Im obigen Beispiel leitet der Browser bei deaktiviertem JavaScript in 0 Sekunden zur Startseite der Website weiter. Außerdem wird der Parameter javascript = false an den Server gesendet.

Ein serverseitiges Skript wie node.js oder PHP kann dann den Parameter analysieren und feststellen, dass JavaScript deaktiviert ist. Anschließend kann eine spezielle Nicht-JavaScript-Version der Website an den Client gesendet werden.

Umesh Patil
quelle
8

Wenn Javascript deaktiviert ist, wird Ihr clientseitiger Code ohnehin nicht ausgeführt. Ich gehe also davon aus, dass Sie möchten, dass diese Informationen serverseitig verfügbar sind. In diesem Fall ist Noscript weniger hilfreich. Stattdessen hätte ich eine versteckte Eingabe und würde Javascript verwenden, um einen Wert einzugeben. Wenn der Wert nach Ihrer nächsten Anfrage oder Ihrem nächsten Postback vorhanden ist, wissen Sie, dass Javascript aktiviert ist.

Seien Sie vorsichtig mit Dingen wie Noscript, bei denen die erste Anforderung möglicherweise deaktiviertes Javascript anzeigt, zukünftige Anforderungen es jedoch aktivieren.

Joel Coehoorn
quelle
5

Sie können beispielsweise document.location = 'java_page.html' verwenden, um den Browser auf eine neue, mit Skripten beladene Seite umzuleiten. Wenn Sie nicht umleiten, ist JavaScript nicht verfügbar. In diesem Fall können Sie entweder auf CGI-Routinen zurückgreifen oder entsprechenden Code zwischen die Tags einfügen. (HINWEIS: NOSCRIPT ist nur in Netscape Navigator 3.0 und höher verfügbar.)

Kredit http://www.intranetjournal.com/faqs/jsfaq/how12.html

Brad8118
quelle
4

Eine Technik, die ich in der Vergangenheit verwendet habe, besteht darin, mit JavaScript ein Sitzungscookie zu schreiben, das einfach als Flag fungiert, um anzuzeigen, dass JavaScript aktiviert ist. Dann sucht der serverseitige Code nach diesem Cookie und ergreift die entsprechenden Maßnahmen, wenn es nicht gefunden wird. Natürlich setzt diese Technik voraus, dass Cookies aktiviert sind!

John Topley
quelle
4

Ich denke, Sie könnten ein Bild-Tag in ein Noscript-Tag einfügen und sich die Statistiken ansehen, wie oft Ihre Website und wie oft dieses Bild geladen wurde.

MrVolley
quelle
4

Die Leute haben bereits Beispiele veröffentlicht, die gute Optionen für die Erkennung sind, aber basierend auf Ihrer Anforderung "Warnung geben, dass die Site nicht ordnungsgemäß funktioniert, ohne dass der Browser JS aktiviert hat". Sie fügen im Grunde ein Element hinzu, das irgendwie auf der Seite angezeigt wird, z. B. die Popups bei Stapelüberlauf, wenn Sie ein Abzeichen mit einer entsprechenden Meldung erhalten, und entfernen dieses dann mit etwas Javascript, das ausgeführt wird, sobald die Seite geladen wird ( und ich meine das DOM, nicht die ganze Seite).

roryf
quelle
3

Erkennen Sie es in was? JavaScript? Das wäre unmöglich. Wenn Sie es nur zu Protokollierungszwecken benötigen, können Sie ein Tracking-Schema verwenden, bei dem jede Seite über JavaScript verfügt, das eine spezielle Ressource (wahrscheinlich eine sehr kleine gifoder ähnliche) anfordert . Auf diese Weise können Sie einfach den Unterschied zwischen eindeutigen Seitenanforderungen und Anforderungen für Ihre Tracking-Datei erkennen.

Hank Gay
quelle
3

Warum setzen Sie nicht einfach einen entführten onClick () -Ereignishandler ein, der nur ausgelöst wird, wenn JS aktiviert ist, und hängen damit einen Parameter (js = true) an die angeklickte / ausgewählte URL an (Sie können auch eine Dropdown-Liste erkennen und ändern Sie den Wert, indem Sie ein ausgeblendetes Formularfeld hinzufügen. Wenn der Server diesen Parameter sieht (js = true), weiß er, dass JS aktiviert ist, und führt dann Ihre ausgefallene Logik serverseitig aus.
Der Nachteil dabei ist, dass Sie beim ersten Besuch eines Benutzers auf Ihrer Website, Ihrem Lesezeichen, Ihrer URL und der von einer Suchmaschine generierten URL feststellen müssen, dass es sich um einen neuen Benutzer handelt. Suchen Sie also nicht nach dem an die URL angehängten NVP. und der Server müsste auf den nächsten Klick warten, um festzustellen, ob der Benutzer JS aktiviert / deaktiviert ist. Ein weiterer Nachteil ist, dass die URL auf der Browser-URL landet. Wenn dieser Benutzer diese URL mit einem Lesezeichen versehen kann, wird der NVP js = true angezeigt, auch wenn für den Benutzer JS nicht aktiviert ist, obwohl der Server dies beim nächsten Klick tun würde Seien Sie weise zu wissen, ob der Benutzer JS noch aktiviert hatte oder nicht. Seufz .. das macht Spaß ...

FirstSOURCE
quelle
3

Um Benutzer zum Aktivieren von JavaScripts zu zwingen, setze ich das Attribut 'href' jedes Links auf dasselbe Dokument, wodurch der Benutzer benachrichtigt wird, JavaScripts zu aktivieren oder Firefox herunterzuladen (wenn er nicht weiß, wie JavaScripts aktiviert werden soll). Ich habe die tatsächliche Link-URL für das Attribut 'name' von Links gespeichert und ein globales Onclick-Ereignis definiert, das das Attribut 'name' liest und die Seite dort umleitet.

Dies funktioniert gut für meine Benutzerbasis, wenn auch etwas faschistisch;).

Jan Sahin
quelle
und ein bisschen ärgerlich, wenn der Benutzer JS aktiviert hat und auf den Link klickt, bevor Ihr progressives Javascript startet ...
Simon_Weaver
1
Sicher, aber noch kein Problem gemeldet.
Jan Sahin
3

Sie erkennen nicht, ob der Benutzer Javascript deaktiviert hat (Server oder Client). Stattdessen nehmen Sie an, dass Javascript deaktiviert ist, und erstellen Ihre Webseite mit deaktiviertem Javascript. Dies vermeidet die Notwendigkeit noscript, die Sie sowieso vermeiden sollten, da es nicht ganz richtig funktioniert und unnötig ist.

Erstellen Sie zum Beispiel einfach Ihre Website, um zu sagen <div id="nojs">This website doesn't work without JS</div>

Dann erledigt Ihr Skript einfach das document.getElementById('nojs').style.display = 'none';normale JS-Geschäft.

Explosionspillen
quelle
Dies ist ein großartiger nahtloser Ansatz. <noscript> -Tags sind auf verschiedenen Seiten viel schwieriger zu pflegen. Mit diesem Ansatz können Sie Ihr Noscript-Styling über Ihre CSS-Datei beibehalten.
Zadubz
3

Überprüfen Sie, ob Cookies eine reine Server - Side - Lösung unter Verwendung von i eingeführt haben hier dann für Javascript überprüfen , indem ein Cookie mit Jquery.Cookie fallen und dann prüfen , für Cookie auf diese Weise u für beide Cookies überprüfen und Javascript

pouya
quelle
3

In einigen Fällen kann es ausreichend sein, es rückwärts zu machen. Fügen Sie eine Klasse mit Javascript hinzu:

// Jquery
$('body').addClass('js-enabled');

/* CSS */
.menu-mobile {display:none;}
body.js-enabled .menu-mobile {display:block;}

Dies kann zu Wartungsproblemen bei komplexen Objekten führen, ist jedoch für einige Dinge eine einfache Lösung. Anstatt zu erkennen, wann es nicht geladen ist, stylen Sie es einfach entsprechend dem Zeitpunkt, an dem es geladen wird.

Jennifer Michelle
quelle
3

Ich möchte meine Lösung hinzufügen, um zuverlässige Statistiken darüber zu erhalten, wie viele echte Benutzer meine Website mit deaktiviertem Javascript über die Gesamtzahl der Benutzer besuchen. Die Überprüfung wird nur einmal pro Sitzung mit folgenden Vorteilen durchgeführt:

  • Benutzer, die 100 Seiten oder nur 1 besuchen, werden jeweils mit 1 gezählt. Dadurch können Sie sich auf einzelne Benutzer konzentrieren, nicht auf Seiten.
  • Unterbricht den Seitenfluss, die Struktur oder die Semantik ohnehin nicht
  • Protokolliert Benutzeragent. Dies ermöglicht das Ausschließen von Bots aus Statistiken wie Google Bot und Bing Bot, bei denen JS normalerweise deaktiviert ist! Könnte auch IP, Zeit usw. protokollieren ...
  • Nur eine Prüfung pro Sitzung (minimale Überlastung)

Mein Code verwendet PHP, MySQL und JQuery mit Ajax, könnte aber an andere Sprachen angepasst werden:

Erstellen Sie eine Tabelle in Ihrer Datenbank wie folgt:

CREATE TABLE IF NOT EXISTS `log_JS` (
  `logJS_id` int(11) NOT NULL AUTO_INCREMENT,
  `data_ins` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `session_id` varchar(50) NOT NULL,
  `JS_ON` tinyint(1) NOT NULL DEFAULT '0',
  `agent` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`logJS_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Fügen Sie dies zu jeder Seite hinzu, nachdem Sie session_start () oder ein gleichwertiges Element verwendet haben (jquery erforderlich):

<?  if (!isset($_SESSION["JSTest"]))
    { 
        mysql_query("INSERT INTO log_JS (session_id, agent) VALUES ('" . mysql_real_escape_string(session_id()) . "', '" . mysql_real_escape_string($_SERVER['HTTP_USER_AGENT']). "')"); 
        $_SESSION["JSTest"] = 1; // One time per session
        ?>
        <script type="text/javascript">
            $(document).ready(function() { $.get('JSOK.php'); });
        </script>
        <?
    }
?>

Erstellen Sie die Seite JSOK.php wie folgt:

<?
include_once("[DB connection file].php");   
mysql_query("UPDATE log_JS SET JS_ON = 1 WHERE session_id = '" . mysql_real_escape_string(session_id()) . "'");
ungebrochen
quelle
3

Ich habe einen anderen Ansatz mit CSS und Javascript selbst gefunden.
Dies ist nur, um mit Klassen und IDs zu basteln.

Das CSS-Snippet:
1. Erstellen Sie eine CSS- ID-Regel und nennen Sie sie #jsDis.
2. Verwenden Sie die Eigenschaft "content", um einen Text nach dem BODY-Element zu generieren. (Sie können dies nach Ihren Wünschen gestalten).
3 Erstellen Sie eine zweite CSS-ID-Regel, nennen Sie sie #jsEn und stilisieren Sie sie. (Der Einfachheit halber habe ich meiner # jsEn-Regel eine andere Hintergrundfarbe gegeben.

<style>
#jsDis:after {
    content:"Javascript is Disable. Please turn it ON!";
    font:bold 11px Verdana;
    color:#FF0000;
}

#jsEn {
    background-color:#dedede;
}

#jsEn:after {
    content:"Javascript is Enable. Well Done!";
    font:bold 11px Verdana;
    color:#333333;
}
</style>

Das JavaScript-Snippet:
1. Erstellen Sie eine Funktion.
2. Holen Sie sich die BODY ID mit getElementById und weisen Sie sie einer Variablen zu.
3. Ändern Sie mit der JS-Funktion 'setAttribute' den Wert des ID-Attributs des BODY-Elements.

<script>
function jsOn() {
    var chgID = document.getElementById('jsDis');
    chgID.setAttribute('id', 'jsEn');
}
</script>

Der HTML-Teil.
1. Benennen Sie das BODY-Elementattribut mit der ID #jsDis.
2. Fügen Sie das Ereignis onLoad mit dem Funktionsnamen hinzu. (jsOn ()).

<body id="jsDis" onLoad="jsOn()">

Da dem BODY-Tag die ID #jsDis zugewiesen wurde:
- Wenn Javascript aktiviert ist, ändert es selbst das Attribut des BODY-Tags.
- Wenn Javascript deaktiviert ist, wird der CSS-Regeltext 'content:' angezeigt.

Sie können mit einem # Wrapper-Container oder mit jedem DIV herumspielen, der JS verwendet.

Hoffe das hilft die Idee zu bekommen.

Chris Pesoa
quelle
2

Das Hinzufügen einer Aktualisierung in Meta in Noscript ist keine gute Idee.

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

  2. Der Attributwert "Aktualisieren" ist nicht Standard und sollte nicht verwendet werden. "Aktualisieren" entzieht dem Benutzer die Kontrolle über eine Seite. Die Verwendung von "Aktualisieren" führt zu einem Fehler in den Richtlinien für die Barrierefreiheit von Webinhalten von W3C --- Referenz http://www.w3schools.com/TAGS/att_meta_http_equiv.asp .

Gaurav Talwar
quelle
Niemand sagte etwas über XHTML. <noscript> ist absolut gültig HTML 4.01 streng.
Tom
2
Noscript ist auch in XHTML 1.0 und XHTML 1.1 perfekt gültig. Es kann keine Metaelemente enthalten und sollte zugunsten einer progressiven Verbesserung vermieden werden, ist jedoch Teil der Sprachen.
Quentin