Sollten wir nicht das <noscript> -Element verwenden?

70

Ich habe hier einige gute Nachteile gefunden:

  • Das Noscript-Element erkennt nur, ob im Browser JavaScript aktiviert ist oder nicht. Wenn JavaScript in der Firewall und nicht im Browser deaktiviert ist, wird JavaScript nicht ausgeführt und der Inhalt des Noscript-Elements wird nicht angezeigt.

  • Viele Skripte hängen von einem bestimmten Feature oder bestimmten Features der unterstützten Sprache ab, damit sie ausgeführt werden können (z. B. document.getElementById). Wenn die erforderlichen Funktionen nicht unterstützt werden, kann JavaScript nicht ausgeführt werden. Da jedoch JavaScript selbst unterstützt wird, wird der Noscript-Inhalt nicht angezeigt.

  • Der nützlichste Ort für die Verwendung des Noscript-Elements befindet sich im Kopf der Seite, wo selektiv festgelegt werden kann, welche Stylesheet- und Meta-Elemente beim Laden der Seite auf die Seite angewendet werden, anstatt warten zu müssen, bis die Seite geladen wird. Leider ist das Noscript-Element nur im Hauptteil der Seite gültig und kann daher nicht im Kopf verwendet werden.

  • Das Noscript-Element ist ein Element auf Blockebene und kann daher nur zum Anzeigen ganzer Inhaltsblöcke verwendet werden, wenn JavaScript deaktiviert ist. Es kann nicht inline verwendet werden.

  • Im Idealfall sollten Webseiten HTML für den Inhalt, CSS für das Erscheinungsbild und JavaScript für das Verhalten verwenden. Wenn Sie das Noscript-Element verwenden, wird ein Verhalten aus dem HTML-Code angewendet, anstatt es aus JavaScript anzuwenden.

Quelle: http://javascript.about.com/od/reference/a/noscriptnomore.htm

Ich stimme dem letzten Punkt sehr zu. Gibt es eine Möglichkeit, eine externe <noscript>Datei zu erstellen und hinzuzufügen ? Sollen wir <noscript>in die platzieren <head>?

javascript xhtml web-standards noscript Jitendra Vyas
quelle
6
Gibt es noch Firewalls, die Javascript deaktivieren? Ich war vor ungefähr 13 Jahren hinter einem und es war schon damals schrecklich. Ich vermute, dass eine solche Richtlinie heutzutage nicht möglich wäre, da etwa ein Drittel des Webs nicht mehr nutzbar wäre
Sean Patrick Floyd,
14
<noscript> ist gemäß der neuesten Spezifikation im Kopf zulässig und wird in der Praxis fast überall unterstützt. developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript . Auch das Noscript-Tag kann von CSS so gestaltet werden, dass es inline ist, genau wie jedes Element auf Blockebene so gestaltet werden kann, dass seine Anzeige in inline
geändert wird
2
Das Noscript-Tag kann sehr gut im Kopfbereich der Seite verwendet werden.
Diablo Geto
Wie bereits erwähnt, ist das <noscript> -Element in <head> in den neuesten Spezifikationen zulässig.
Gaurang Patel

Antworten:

48

Es ist besser, die Standardeinstellung nicht Javascript zu verwenden und dann einen Javascript-Code mit einer Javascript-fähigen Seite überschreiben zu lassen. Muss nicht viel sein. Kann nur ein display:none;Block sein, der dann display:block;per Javascript festgelegt wird, und umgekehrt für die Nicht-JS-Seite.

Tor Valamo
quelle
32
Ein display:block "Ihr Browser scheint JavaScript nicht zu unterstützen", auf das display:noneJavascript eingestellt ist, ist eine praktikable Alternative zu NOSCRIPT, aber Sie verlieren die semantischen Informationen (Roboter wissen nicht, wovon Sie sprechen).
Konerak
2
Um sicherzustellen, dass dieser Ansatz bei aktivierter Javascript- Datei keinen Flash der Nicht-Javascript-Version verursacht, finden Sie unter stackoverflow.com/questions/3221561/… Informationen zum Vermeiden des Flashs . (Verwendet Javascript im head-Tag, um das HTML-Tag auszublenden, da dieses Tag vorhanden ist, bevor der Text gelesen wird. Zeigen Sie es dann erneut an, wenn das Dokument fertig ist.)
ToolmakerSteve
6
Sie erwähnen , es ist besser ... . Warum ist es besser als <noscript>Tags?
random_user_name
1
@cale_b Wenn Sie den Originalbeitrag lesen, sehen Sie eine ganze Liste von Gründen.
Tor Valamo
2
Es ist gefährlich, HTML-Inhalte aufgrund von Skripten jemals anzuzeigen. Der ursprüngliche Inhalt und HTML-Code sollten unabhängig von den Skriptabhängigkeiten standardmäßig angezeigt werden. Die ursprüngliche Idee hinter Noscript als Element war, nur dann zu erscheinen, wenn die Skripterstellung im Browser deaktiviert ist. Indem Sie dieses Konzept umkehren und nun Inhalt und Noskript durch explizite Skripte auslösen lassen, entfernen Sie die native Anzeige dieser Elemente ohne Skripte.
Stokely
25

Nachdem ich viele Tage nachgedacht und meinen Code hin und her geändert habe, denke ich, dass ich jetzt ein klareres Bild habe und möchte meine zwei Cent zu diesem Thema teilen, bevor ich es vergesse. 

<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>

vs.

<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>

Je nach Situation sind drei Fälle zu berücksichtigen:

Fall 1 - Bei Bedarf ist das Skript inline

JavaScript deaktiviert

  • Der Inhalt im <noscript>Element wird sofort angezeigt, der Inhalt, der nicht von js stammt, wird angezeigt
  • Der Inhalt im <div>Element wird sofort angezeigt, der Inhalt, der nicht von js stammt, wird angezeigt

JavaScript aktiviert

  • Der Inhalt im <noscript>Element wird überhaupt nicht angezeigt. Der Inhalt wird angezeigt
  • Der Inhalt des <div>Elements wird möglicherweise vorübergehend angezeigt, bevor er ausgeblendet wird. Der Inhalt wird angezeigt

In diesem Fall ist die Verwendung eines <noscript>Elements vorteilhaft.

Fall 2 - Wenn erforderlich, stammt das Skript aus einer externen Quelle (von Drittanbietern), das Ausblenden des <div>Elements erfolgt jedoch mit einem Inline-Skript

JavaScript deaktiviert

  • Der Inhalt im <noscript>Element wird sofort angezeigt, der Inhalt, der nicht von js stammt, wird angezeigt
  • Der Inhalt im <div>Element wird sofort angezeigt, der Inhalt, der nicht von js stammt, wird angezeigt

JavaScript aktiviert, aber das erforderliche Skript ist blockiert

  • Inhalt im <noscript>Element erscheint überhaupt nicht, nichts wird angezeigt!
  • Der Inhalt des <div>Elements wird möglicherweise kurz angezeigt, bevor er ausgeblendet wird. Es wird nichts angezeigt!

JavaScript-fähiges und erforderliches Skript wird empfangen

  • Der Inhalt im <noscript>Element wird überhaupt nicht angezeigt. Der Inhalt wird angezeigt
  • Der Inhalt des <div>Elements wird möglicherweise vorübergehend angezeigt, bevor er ausgeblendet wird. Der Inhalt wird angezeigt

In diesem Fall ist die Verwendung eines <noscript>Elements vorteilhaft.

Fall 3 - Bei Bedarf verbirgt das Skript das <div>Element

JavaScript deaktiviert

  • Der Inhalt im <noscript>Element wird sofort angezeigt, der Inhalt, der nicht von js stammt, wird angezeigt
  • Der Inhalt im <div>Element wird sofort angezeigt, der Inhalt, der nicht von js stammt, wird angezeigt

JavaScript aktiviert, aber das erforderliche Skript ist blockiert

  • Inhalt im <noscript>Element erscheint überhaupt nicht, nichts wird angezeigt!
  • Inhalt im <div>Element wird angezeigt, Nicht-js-Inhalt wird angezeigt

JavaScript-fähiges und erforderliches Skript wird empfangen

  • Der Inhalt im <noscript>Element wird überhaupt nicht angezeigt. Der Inhalt wird angezeigt
  • Der Inhalt des <div>Elements wird möglicherweise vorübergehend angezeigt, bevor er ausgeblendet wird. Der Inhalt wird angezeigt

In diesem Fall ist die Verwendung eines <div>Elements vorteilhaft.

in Summe

Verwenden Sie das <noscript>Element, wenn das Rendern des HTML-Inhalts von Skripten von Drittanbietern abhängt oder wenn das erforderliche Skript inline ist. Verwenden Sie <div>andernfalls element und stellen Sie sicher, dass das erforderliche Skript Folgendes enthält:

document.getElementById('noscript').style.display='none';
Fragenüberlauf
quelle
8

Obwohl Tor Valamo eine elegante Antwort auf dieses Problem hat, gibt es ein Problem, das dazu führen kann, dass Sie die Verwendung dieser Technik ablehnen.

Das Problem ist (normalerweise) IE. Es hat die Tendenz, das JS etwas langsamer als andere Browser zu laden und auszuführen, was dazu führt, dass das Div "Bitte aktivieren Sie Ihr Javascript" manchmal für den Bruchteil einer Sekunde geflasht wird, bevor es dann das JS lädt und das Div verbirgt.

Es ist ärgerlich und um dies zu umgehen, können Sie den "Klassiker" implementieren. <noscript>Redirect-Ansatz.

<head>
<noscript><meta http-equiv="refresh" content="0; URL=/NO_SCRIPT_URL/ROUTE_HERE"/></noscript>
</head>

Dies ist die solideste Technik, die mir in Bezug auf dieses kleine Übel begegnet ist.

Steve Hemsley
quelle
Solange Sie zu einer Seite weiterleiten, die auf andere Weise dieselben Funktionen und Informationen bietet. Ansonsten ist das wirklich sehr, sehr nervig.
Benutzer4815162342
Informationen zum Vermeiden des Blitzes finden Sie unter stackoverflow.com/questions/3221561/… . (Verwendet Javascript im head-Tag, um das HTML-Tag auszublenden, da dieses Tag vorhanden ist, bevor der Text gelesen wird. Zeigen Sie es dann erneut an, wenn das Dokument fertig ist.)
ToolmakerSteve
Ich habe dies mit einer Chrome-Erweiterung getestet, die JS blockiert und nicht funktioniert (keine Umleitung). Das Deaktivieren von nur JS in den Browsereinstellungen funktioniert. Nicht die beste Lösung
Raja Khoury
7

Eine nützliche Anwendung für Noscript, die ich gesehen habe, ist das schrittweise verbesserte asynchrone Laden von schwerem Inhalt (insbesondere "unter der Falte"). Große Bilder, Iframes usw. können in der HTML-Quelle in Noscript eingeschlossen werden. Anschließend können die nicht verpackten Elemente mit JavaScript an die Seite angehängt werden, nachdem das DOM fertig ist. Dadurch wird die Seite entsperrt und das erste Laden wird viel schneller, insbesondere wenn Ihre Benutzeroberfläche auf JS / JQ-Interaktionen angewiesen ist, die angewendet werden, nachdem das Dokument fertig ist (2 Sekunden gegenüber 6 Sekunden für eine von mir konsultierte Portfolio-Seite).

Geordie Kaytes
quelle
5

Heutzutage scheint fast jeder Browser Javascript auszuführen, aber Sie können nie wissen, wer auf Ihre Website zugreifen wird. Heutzutage verwenden sogar Screenreader und Webcrawler Javascript und stellen manchmal AJAX-Anfragen, wenn dies erforderlich ist.

Das heißt, wenn Sie auf No-Javascript zurückgreifen, gibt es einen viel besseren Weg als ein <noscript>Tag. Tun Sie dies einfach in HEADIhrem Dokument:

<script type="text/javascript">
    document.getElementsByTagName('html')[0].className += ' Q_js'; // better than noscript
</script>

Mit dieser Technik können Sie leicht auf die Q_jsKlasse in Ihrem CSS verweisen , um Dinge auszublenden. Mit dem <noscript>Tag können Sie am besten hoffen, eine zusätzliche CSS-Datei einzuschließen, um das vorherige CSS zu überschreiben. Dies ist wichtig, wenn einige Elemente mit statischem Inhalt sofort ausgeblendet werden sollen (nicht flackern), bis Javascript sie dynamischer machen kann.

Kurz gesagt, die von mir vorgeschlagene Technik spricht alle Ihre Nachteile 1-5 an, und ich glaube, sie ist strikt besser als die Verwendung <noscript>.

Gregory Magarshak
quelle
Die Verwendung von JS durch Webcrawler ist immer noch recht eingeschränkt. Das Verstecken von Dingen mit JS erzeugt ein Blinken.
Gherman
Es wird nur dann ein Blinken erzeugt, wenn Ihr Javascript nach den Elementen geladen wird . Das versteckt sich nicht Elemente , sondern es wird eine Klasse zu ihrem Container hinzugefügt, wobei Javascript im <head> hinzugefügt wird, das vor einem dieser Elemente geladen wird!
Gregory Magarshak
4

In (hoffentlich naher) Zukunft können Sie css @media scripting verwenden :

@media (scripting: none) {
    /* styles for when JS is disabled */
}
Null
quelle
1

Ich erstelle eine volle Höhe, volle Breite, Position: festes div auf allen Seiten mit einer ID. 

<div id='noscript_div' style='position:fixed;z-index:20000000;height:100%;width:100%;line-height:100%;'>enable JS buddy</div>
$('#noscript_div').hide();
$(document).ready(function(event){




});

Ich bin kein Experte. Das hat bei mir funktioniert. Es tut mir leid, aber dieser Fall ist nur geeignet, wenn der Benutzer sein Javascript immer aktivieren soll

R. Raaj Prashanth
quelle
$ ('# noscript_div'). hide (); wird nicht feuern, wenn jquery irgendwie fehlschlägt
mowgli
1

Die einfache Idee ist, dass sich Ihre Website in diesen Zeiten möglicherweise an die Nichtverwendung von Javascript auf langsamen Geräten anpasst, indem Sie ein Noscript-Tag wie eine Entität für den gesamten Inhalt Ihrer Website verwenden. ** ( ). ** Sie können sehen , ob Javascript vorhanden ist oder nicht. Die Funktionalität der Website kann in jedem Fall "gleich" sein. Auf chinesischen langsamen Geräten, z. B.: Samsung Neo Mini Phone, kann diese Methode eine Website ohne Verzögerungen bei geringem Internetverkehr ausführen. Versuchen Sie, diese Website mit automatischer Doppelfunktionalität auszuführen wenn js ein / aus ist Fälle: Ihr HTML sollte auf kein Javascript vorbereitet sein und alle Steuerelemente müssen auch funktionieren, wenn Javascript verwendet wird Wenn diese Option deaktiviert ist, sollten Benutzer, die grundlegende HTML-Steuerelemente verwenden, in der Lage sein, alles zu tun, was sie zuvor getan haben, als Javascript aktiv war. So <noscript></noscript>kann der dynamische Wechsel zu demselben Inhalt auf andere Weise mit denselben Ergebnissen erfolgen = Lösen des Problems, aus dem die Benutzer öffnen Ihre URL

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>noscript can change the Internet forever</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
    $('noscript').replaceWith(function() {
        return this.textContent || this.innerText;
    });
    $("p#javascripton").css("background-color", "yellow"); 
    $("p").click(function(){
        $(this).hide();
    });
}); 
//-->
</SCRIPT>
<noscript>
<p>
Noscript's usage today can be logical for <a href="http://google.com/"><p id="javascripton">eg pc/laptop/high quality tablets usage the complete website with all features:images high resolution,javascript<br><h1>OR without javascript so no high resolutions images inserted with a jquery automated script generated from some php+javascript scripts so have usage for 80% mobile application cause almost are from China ,so low quality products=low cpu,low ram :IN THIS CASE SOMEONE CAN THINK TO SWITCH HIS PHONE TO NO JAVASCRIPT USAGE SO IF ANY PROGRAMMER CAN ADAPT AN ENTIRELY APPLICATION TO THE METHOD I USED IN THIS EXAMPLE AUTOMATED HIS BROWSER IS ADAPT FOR ANY RANDOM ACTION ABOUT THE USER CHOISE(YOU UNDERSTAND "TO USE OR NOT JAVASCRIPT") SO HIS CHINESE PHONE CAN BE APROXIMATELLY APROACH LIKE QUALITY OF SPEED EXECUTION THE OTHERS PC/LAPTOPS/TABLETS QUALITY PRODUCTS.<BR><BR>This stupid example is the best example how no script tag can change the quality of services on this planet ,boost the speed of the internet connection and stops unnecessary use of A LOT OF INTERNET TRAFFIC on slow devices..a simple tag can change the entirely dynamic of programmer's views so entirely Planet's beneficts</h1><p></a> <br>
run this code in two instances :<br>with browser javascript enable <br>and without(browser's javascript disable or eg a firefox plugin noscript states on/off)
</p>
</noscript>
</BODY></HTML>

und um mehr dazu zu sagen ... das richtige Noscript wurde erfunden, um wie ein Auslöser zu funktionieren, wenn js deaktiviert ist, aber Sie können diese Funktion umgehen, um den Verlauf der Internetfunktionalität in Bezug auf den aktuellen Stand zu ändern und die Dynamik zu ändern.

Constantin
quelle
1

Verwenden Sie wie alle Dinge das richtige Werkzeug für den Job.

Wenn Sie die Google Maps-API verwenden, haben Sie ein statisches Bild über ein Tag, das durch eine dynamische JS-Karte ersetzt wird. Google hat vor kurzem damit begonnen, für alles Gebühren zu erheben. Mit dem obigen Beispiel kostet es Sie das Doppelte, einmal für statische und einmal für dynamische. Die statische Zuordnung ist nur relevant, wenn JS deaktiviert ist. Um doppelte Zahlungen zu sparen, scheint es mir daher die beste Lösung zu sein, das Tag für die statische Karte in ein Tag zu packen.

Peter
quelle
-1

Das Element "noscript" wird in XML oder in XHTML5 polyglot nicht unterstützt und wird daher vom W3C nicht empfohlen.

Ich mag auch nicht die Idee, dass jede Seite mit einem nicht-script-sichtbaren Div beginnt, der dann von einem Javascripted Circus Trick auf jeder Seite einer Website ausgeblendet wird. Gefährliche und mehr Skriptabhängigkeiten, die fehlschlagen oder Chaos anrichten können, wenn sie von einem späteren Entwickler geändert werden.

Eine bessere Strategie besteht darin, Ihre Website mit einem grundlegenden HTML-Design zu gestalten, das alle inneren Skriptinhalte umschließt, sodass der Benutzer zumindest ein Seitendesign mit einer Kopfzeile und einer Stelle sieht, an der grundlegende Inhalte angezeigt werden. Wenn es leer ist, ist es ziemlich offensichtlich, dass sie den Inhalt aus einem bestimmten Grund nicht anzeigen können. Ich würde dann ein kleines Nachrichten- oder Informationssymbol in die Fußzeile einfügen, das besagt, wenn Sie keinen Inhalt sehen, ist Ihr Javascript deaktiviert. Das erscheint, ob sie Skriptinhalte sehen oder nicht. Diese Lösung ist frei von Skripten.

Als letzten Ausweg können Sie diese Nachricht mithilfe der Anzeige durch Skripte ausblenden lassen: keine am Ende jeder Webseite.

Es ist nicht so sexy wie das Bereitstellen von alternativen Inhalten oder einer Nachrichtenbox, aber bei schweren Angular-Websites müssten Sie ohnehin eine neue Inhaltsseite für sie erstellen, sollte die Skripterstellung deaktiviert sein. Diese Lösung berücksichtigt auch keine Skriptunterstützung in einem Benutzeragenten im Vergleich zu deaktivierter Unterstützung und macht Ihre Webseite zu 100% XML und HTML5 kompatibel mit allen Benutzeragenten, indem das Noscript-Tag vermieden wird.

Stokely
quelle
1
Downvoting. Bei so etwas wie <noscript> geht es darum, genau das zu tun, was Sie vorschlagen: eine vernünftige Benutzeroberfläche für Benutzer bereitzustellen (es gibt noch einige!), Die JS nicht verwenden können oder wollen. Hier gibt es keinen JS-Zirkustrick, nur grundlegende Webstandards, die genau für diesen Zweck geeignet sind. Warum sie neu erfinden und die UX dabei weniger gut machen?
Marnen Laibow-Koser
-12

Ich empfehle Ihnen, nicht zu verwenden <noscript>, Sie können den folgenden Code verwenden:

<HTML>
<head>
<script>
     window.location="some-page.php";
</script>
</head>
<body>
<p>
    Please active JavaScript .
</p>
</body>
</HTML>

Wenn JS unter keinen Umständen aktiviert ist, wird die Nachricht angezeigt, andernfalls wird der Benutzer zur Zielseite umgeleitet.

mohammad
quelle
2
Ich empfehle Ihnen, <noscript> nicht zu verwenden. Sie können den folgenden Code verwenden. <HTML> <head> <script> window.location = "some-page.php"; </ script> </ head> <body> <p> Bitte aktives JavaScript. </ p> </ body> </ HTML> Wenn JS unter keinen Umständen aktiviert ist, wird die Nachricht angezeigt, andernfalls wird der Benutzer zur Zielseite umgeleitet.
Mohammed
Ich empfehle Ihnen, <noscript> nicht zu verwenden. Sie können den folgenden Code verwenden. "<HTML> <head> <script> window.location =" some-page.php "; </ script> </ head> <body> <p> Bitte aktivieren Sie JavaScript. </ P> </ body> </ HTML> "Wenn JS unter keinen Umständen aktiviert ist, wird die Nachricht angezeigt, andernfalls wird der Benutzer zur Zielseite umgeleitet.
Mohammed
Die Formatierung wurde korrigiert - wählen Sie einfach den Code aus und drücken Sie die Codetaste in der Symbolleiste (oder rücken Sie ihn mit 4 Leerzeichen ein).
Rich Bradshaw
Downvoting. Warum neu erfinden, was der Standard Ihnen bereits bietet?
Marnen Laibow-Koser