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.
javascript
html
code-snippets
MikeJ
quelle
quelle
Antworten:
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.
quelle
<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 IE6Ich 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:
... 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.
quelle
noscript
Blöcke werden ausgeführt, wenn JavaScript deaktiviert ist, und werden normalerweise verwendet, um alternative Inhalte zu den in JavaScript generierten anzuzeigen, zBenutzer ohne js erhalten den
next_page
Link - 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:
Ü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.
quelle
Dies hat bei mir funktioniert: Es leitet einen Besucher weiter, wenn Javascript deaktiviert ist
quelle
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:
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!
quelle
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
quelle
<noscript>
ist nicht einmal notwendig und wird in XHTML nicht unterstützt .Arbeitsbeispiel :
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 ...
quelle
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.
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?
quelle
.nojs
Klasse erwähnt hat! Dies ist einer der nahtlosesten Ansätze undnoscript
beschämt.nur ein bisschen hart aber (Hairbo brachte mich auf die Idee)
CSS:
JS:
HTML:
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?
quelle
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.
quelle
Sie sollten sich das Noscript-Tag ansehen.
quelle
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.
quelle
Fügen Sie dies dem HEAD-Tag jeder Seite hinzu.
Also hast du:
Mit Dank an Jay.
quelle
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:
Dann benutze ich am Anfang meines Dokuments
.onload
oderdocument.ready
innerhalb einer Schleife vongetElementsByName('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
noscript
Tag experimentiere und erwarte, dass es einige zusätzliche Vorteile hat.quelle
Dies ist die "sauberste" Lösungs-ID:
quelle
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.
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.
quelle
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.
quelle
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
quelle
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!
quelle
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.
quelle
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).
quelle
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
gif
oder ähnliche) anfordert . Auf diese Weise können Sie einfach den Unterschied zwischen eindeutigen Seitenanforderungen und Anforderungen für Ihre Tracking-Datei erkennen.quelle
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ß ...
quelle
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;).
quelle
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.quelle
Ü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
quelle
In einigen Fällen kann es ausreichend sein, es rückwärts zu machen. Fügen Sie eine Klasse mit Javascript hinzu:
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.
quelle
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:
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:
Fügen Sie dies zu jeder Seite hinzu, nachdem Sie session_start () oder ein gleichwertiges Element verwendet haben (jquery erforderlich):
Erstellen Sie die Seite JSOK.php wie folgt:
quelle
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.
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.
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 ()).
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.
quelle
Das Hinzufügen einer Aktualisierung in Meta in Noscript ist keine gute Idee.
Weil das Noscript-Tag nicht XHTML-kompatibel ist
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 .
quelle