Gibt es einen HTML-Code, der <noscript> entgegengesetzt ist?

105

Gibt es in HTML ein Tag, dessen Inhalt nur angezeigt wird, wenn JavaScript aktiviert ist? Ich weiß, dass es <noscript>umgekehrt funktioniert und den HTML-Inhalt anzeigt, wenn JavaScript deaktiviert ist. Ich möchte jedoch nur dann ein Formular auf einer Website anzeigen, wenn JavaScript verfügbar ist, und ihnen mitteilen, warum sie das Formular nicht verwenden können, wenn sie es nicht haben.

Ich weiß nur, wie das geht, mit der document.write();Methode in einem Skript-Tag, und es scheint für große Mengen an HTML etwas chaotisch.

javascript html noscript Re0sless
quelle

Antworten:

56

Sie könnten ein unsichtbares Div haben, das beim Laden der Seite über JavaScript angezeigt wird.

ceejayoz
quelle
216

Der einfachste Weg, den ich mir vorstellen kann:

<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

Kein document.write, keine Skripte, reines CSS.

Wille
quelle
11
Zumindest im xhtml-Standard nicht erlaubt.
Dykam
29
@Dykam: Es ist in HTML5 erlaubt: dev.w3.org/html5/spec/Overview.html#the-noscript-element und in der Praxis wird es von praktisch jedem Browser unterstützt.
Will
3
Es ist ratsam, es zu verwenden display: none !important, um zu verhindern, dass es durch spezifischere Regeln (z. B. durch ID- oder CSS-Selektoren) überschrieben wird, die für die Verwendung vorgesehen sind, wenn Skripte aktiviert sind.
Istador
3
Ein Wort der Warnung: Aktuelle Versionen von Chrome analysieren die Tags nicht <noscript>beim ersten Aktualisieren einer Seite, nachdem Sie Javascript in den Einstellungen deaktiviert haben. Sie müssen zweimal auf reload klicken, damit es funktioniert.
Tobia
2
Sauber, prägnant, verwendet kein Javascript. Ich mag das.
Dragas
8

Ich bin nicht wirklich mit allen Antworten hier einverstanden, dass HTML vorher eingebettet und mit CSS ausgeblendet werden soll, bis es wieder mit JS angezeigt wird. Selbst wenn JavaScript nicht aktiviert ist, ist dieser Knoten noch im DOM vorhanden. Zwar werden die meisten Browser (auch Browser mit Barrierefreiheit) dies ignorieren, aber es existiert immer noch und es kann ungerade Zeiten geben, in denen dies zurückkommt, um Sie zu beißen.

Meine bevorzugte Methode wäre die Verwendung von jQuery zum Generieren des Inhalts. Wenn es sich um viel Inhalt handelt, können Sie ihn als HTML-Fragment speichern (nur den HTML-Code, den Sie anzeigen möchten, und keines der HTML-, Body-, Head- usw. Tags) und dann mit den Ajax-Funktionen von jQuery laden die ganze Seite.

test.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {
       $.get('_test.html', function(html) {
         $('p:first').after(html);
       });
     });
    </script>
</head>
<body>
  <p>This is content at the top of the page.</p>
  <p>This is content at the bottom of the page.</p>
</body>
</html>

_test.html

<p>This is from an HTML fragment document</p>

Ergebnis

<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>
Chris Bloom
quelle
8

Trennen Sie zunächst immer Inhalt, Markup und Verhalten!

Wenn Sie jetzt die jQuery-Bibliothek verwenden (das sollten Sie wirklich, es macht JavaScript viel einfacher), sollte der folgende Code funktionieren:

$(document).ready(function() {
    $("body").addClass("js");
});

Dadurch erhalten Sie eine zusätzliche Klasse für den Body, wenn JS aktiviert ist. In CSS können Sie jetzt den Bereich ausblenden, wenn die JS-Klasse nicht verfügbar ist, und den Bereich anzeigen, wenn JS verfügbar ist.

Alternativ können Sie no-jsIhrem Body-Tag die Standardklasse hinzufügen und diesen Code verwenden:

$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});

Denken Sie daran, dass es weiterhin angezeigt wird, wenn CSS deaktiviert ist.

alexanderpas
quelle
3

Ich habe eine einfache und flexible Lösung, die Wills ähnelt (aber mit dem zusätzlichen Vorteil, dass sie ein gültiges HTML ist):

Geben Sie dem body-Element die Klasse "jsOff". Entfernen (oder ersetzen) Sie dies durch JavaScript. Lassen Sie CSS alle Elemente mit der Klasse "jsOnly" mit einem übergeordneten Element mit der Klasse "jsOff" ausblenden.

Dies bedeutet, dass bei aktiviertem JavaScript die Klasse "jsOff" aus dem Hauptteil entfernt wird. Dies bedeutet, dass Elemente mit einer Klasse von "jsOnly" kein übergeordnetes Element mit einer Klasse von "jsOff" haben und daher nicht mit dem CSS-Selektor übereinstimmen, der sie verbirgt. Daher werden sie angezeigt.

Wenn JavaScript deaktiviert ist, wird die Klasse "jsOff" nicht aus dem Textkörper entfernt. Elemente mit „jsOnly“ wird ein Elternteil mit „jsOff“ haben und so werden das CSS - Selektor übereinstimmen , dass versteckt sie, so werden sie ausgeblendet werden.

Hier ist der Code:

<html>
    <head>
        <!-- put this in a separate stylesheet -->
        <style type="text/css">
            .jsOff .jsOnly{
                display:none;
            }
        </style>
    </head>

    <body class="jsOff">
        <script type="text/javascript">
            document.body.className = document.body.className.replace('jsOff','jsOn');
        </script>

        <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>

        <p class="jsOnly">I am only shown if JS is enabled</p>
    </body>
</html>

Es ist gültig HTML. Es ist einfach. Es ist flexibel.

Fügen Sie einfach die Klasse "jsOnly" zu jedem Element hinzu, das nur angezeigt werden soll, wenn JS aktiviert ist.

Bitte beachten Sie, dass das JavaScript, mit dem die Klasse "jsOff" entfernt wird, so früh wie möglich innerhalb des Body-Tags ausgeführt werden sollte. Es kann nicht früher ausgeführt werden, da das Body-Tag noch nicht vorhanden ist. Es sollte später nicht ausgeführt werden, da dies bedeutet, dass Elemente mit der Klasse "jsOnly" möglicherweise nicht sofort sichtbar sind (da sie mit dem CSS-Selektor übereinstimmen, der sie verbirgt, bis die Klasse "jsOff" aus dem body-Element entfernt wird).

Dies könnte auch einen Mechanismus für das Nur .jsOn .someClass{}-Js-Styling (z .jsOff .someOtherClass{}. B. ) und das Nur-Js-Nur-Styling (z . B. ) bereitstellen . Sie können es verwenden, um eine Alternative zu <noscript>:

.jsOn .noJsOnly{
    display:none;
}
Spycho
quelle
1

Sie können auch Javascript verwenden, um Inhalte aus einer anderen Quelldatei zu laden und diese auszugeben. Das ist vielleicht ein bisschen mehr Black Box als Sie suchen.

Der Schlumpf
quelle
1

Hier ist ein Beispiel für den versteckten Div-Weg:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *[data-when-js-is-on] {
                display: none;
            }
        </style>
        <script>
            document.getElementsByTagName("style")[0].textContent = "";
        </script>
    </head>
    <body>
        <div data-when-js-is-on>
            JS is on.
        </div>
    </body>
</html>

(Sie müssten es wahrscheinlich für einen schlechten IE optimieren, aber Sie haben die Idee.)

Shadow2531
quelle
1

Meine Lösung

.css:

.js {
display: none;
}

.js:

$(document).ready(function() {
    $(".js").css('display', 'inline');
    $(".no-js").css('display', 'none');
});

.html:

<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>
prgDevelop
quelle
Möchten Sie in Ihrem HTML-Beispiel die Zeilen nicht mit </ span> beenden?
Curt
0

Alex 'Artikel fällt mir hier ein, er gilt jedoch nur, wenn Sie ASP.NET verwenden. Er könnte jedoch in JavaScript emuliert werden, aber Sie müssten erneut document.write () verwenden.

Ross
quelle
0

Sie können die Sichtbarkeit eines Absatzes | div auf 'versteckt' setzen.

Dann können Sie in der Funktion "Onload" die Sichtbarkeit auf "sichtbar" setzen.

Etwas wie:

<body onload = "javascript: document.getElementById (rec) .style.visibility = sichtbar"> <p style = "sichtbarkeit: sichtbar" id = "rec"> Dieser Text muss ausgeblendet werden, sofern kein Javascript verfügbar ist. </ p>


quelle
0

Dafür gibt es kein Tag. Sie müssten Javascript verwenden, um den Text anzuzeigen.

Einige Leute haben bereits vorgeschlagen, JS zu verwenden, um CSS dynamisch sichtbar zu machen. Sie können den Text auch dynamisch mit document.getElementById(id).innerHTML = "My Content"den Knoten generieren oder dynamisch erstellen, aber der CSS-Hack ist wahrscheinlich am einfachsten zu lesen.

cpm
quelle
0

In dem Jahrzehnt, in dem diese Frage gestellt wurde, wurde das HIDDENAttribut zu HTML hinzugefügt. Es ermöglicht das direkte Ausblenden von Elementen ohne Verwendung von CSS. Wie bei CSS-basierten Lösungen muss das Element vom Skript nicht ausgeblendet werden:

<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>
Futter
quelle