Gibt es ein HTML-Gegenstück zu <noscript>?

StackOverflow https://stackoverflow.com/questions/30319

  •  09-06-2019
  •  | 
  •  

Frage

Gibt es in HTML ein Tag, das seinen Inhalt nur anzeigt, wenn JavaScript aktiviert ist?Ich weiß <noscript> funktioniert umgekehrt und zeigt seinen HTML-Inhalt an, wenn JavaScript deaktiviert ist.Aber ich möchte ein Formular nur dann auf einer Website anzeigen, wenn JavaScript verfügbar ist, und ihnen sagen, warum sie das Formular nicht verwenden können, wenn sie es nicht haben.

Die einzige Möglichkeit, die ich kenne, ist mit dem document.write(); Methode in einem Skript-Tag, und es scheint bei großen HTML-Mengen etwas chaotisch zu sein.

War es hilfreich?

Lösung

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

Andere Tipps

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.

Ich bin mit allen Antworten hier nicht wirklich einverstanden, was das vorherige Einbetten des HTML-Codes und das Ausblenden mit CSS betrifft, bis er wieder mit JS angezeigt wird.Auch ohne aktiviertes JavaScript existiert dieser Knoten immer noch im DOM.Zwar ignorieren die meisten Browser (sogar Barrierefreiheitsbrowser) es, aber es existiert immer noch und es kann seltsame Zeiten geben, in denen es Ihnen wieder auffällt.

Meine bevorzugte Methode wäre die Verwendung von jQuery zum Generieren des Inhalts.Wenn es sich um einen großen Inhalt handelt, können Sie ihn als HTML-Fragment speichern (nur den HTML-Code, den Sie anzeigen möchten, und keinen HTML-Code, Textkörper, Kopf usw.).Tags) und verwenden Sie dann die Ajax-Funktionen von jQuery, um sie in die gesamte Seite zu laden.

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>

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

Wenn Sie nun die jQuery-Bibliothek verwenden (das sollten Sie wirklich, sie macht JavaScript viel einfacher), sollte der folgende Code ausreichen:

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

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

Alternativ können Sie hinzufügen no-js als Standardklasse für Ihr Body-Tag und verwenden Sie diesen Code:

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

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

Ich habe eine einfache und flexible Lösung, die Wills etwas ähnelt (jedoch mit dem zusätzlichen Vorteil, dass es sich um gültiges HTML handelt):

Geben Sie dem Body-Element die Klasse „jsOff“.Entfernen (oder ersetzen) Sie dies durch JavaScript.Verfügen Sie über CSS, um alle Elemente mit der Klasse „jsOnly“ mit einem übergeordneten Element mit der Klasse „jsOff“ auszublenden.

Das bedeutet, dass bei aktiviertem JavaScript die Klasse „jsOff“ aus dem Body entfernt wird.Dies bedeutet, dass Elemente mit der Klasse „jsOnly“ kein übergeordnetes Element mit der Klasse „jsOff“ haben und daher nicht mit dem CSS-Selektor übereinstimmen, der sie verbirgt, sodass sie angezeigt werden.

Wenn JavaScript deaktiviert ist, die Klasse „jsOff“. wird nicht aus dem Körper entfernt werden.Elemente mit „jsOnly“ Wille habe ein Elternteil mit „jsOff“ und so Wille mit dem CSS-Selektor übereinstimmen, der sie verbirgt, sodass 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ültiges 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, das die Klasse „jsOff“ entfernt, so früh wie möglich innerhalb des Body-Tags ausgeführt werden sollte.Es kann nicht früher ausgeführt werden, da der Body-Tag noch nicht vorhanden ist.Es sollte nicht später 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 reines JS-Styling bereitstellen (z. B. .jsOn .someClass{}) und No-JS-only-Styling (z. B. .jsOff .someOtherClass{}).Sie könnten es verwenden, um eine Alternative zu bieten <noscript>:

.jsOn .noJsOnly{
    display:none;
}

Sie können auch Javascript verwenden, um Inhalte aus einer anderen Quelldatei zu laden und auszugeben.Das ist aber vielleicht etwas mehr Black-Box-Is, als Sie suchen.

Hier ist ein Beispiel für die Hidden-Div-Methode:

<!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 verstehen, worauf es ankommt.)

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>

Alex' Artikel Das kommt mir hier in den Sinn, ist jedoch nur anwendbar, wenn Sie ASP.NET verwenden. Es könnte jedoch in JavaScript emuliert werden, aber auch hier müssten Sie document.write(); verwenden.

Sie können die Sichtbarkeit eines Absatzes/Divs auf „versteckt“ setzen.

Dann könnten Sie in der Funktion „onload“ die Sichtbarkeit auf „sichtbar“ setzen.

Etwas wie:

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

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 generieren mit document.getElementById(id).innerHTML = "My Content" oder das dynamische Erstellen der Knoten, aber der CSS-Hack ist wahrscheinlich am einfachsten zu lesen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top