Wie Teile von HTML zu verstecken, wenn JavaScript deaktiviert ist?

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

  •  21-09-2019
  •  | 
  •  

Frage

Ich versuche, Benutzer ohne JavaScript aufzunehmen. (By the way, ist es die Mühe wert heutzutage?)

In einer HTML-Datei möchte ich ein Teil davon ausgeführt werden, wenn Skripte auf , und ein anderer Teil, wenn Skripte sind ausgeschaltet.

Der <noscript> Tag lässt mich den ehemaligen tun, aber wie diese erreichen? Wie kann ich einen Teil von HTML markieren, so dass sie nicht durch Browser analysiert wird, wenn Skripte off

War es hilfreich?

Lösung

hier ist ein Video-Tutorial, wie kann dies mit jQuery getan werden: http://screenr.com/ya7

Code: 

<body class="noscript">
<script>
$('body').removeClass('noscript');
</script>
</body>

Und dann versteckt nur die relevanten Elemente unter body.noscript entsprechend.

Bearbeiten Allerdings könnte JQuery für ein kleines Update wie diese aufgebläht werden, so dass ich Zauber Paracelsus Antwort vorschlagen, da es nicht erforderlich ist JQuery.

Andere Tipps

Ich hatte nach einem Weg gesucht, um diese so zu tun, dass ich ein Navigation Dropdown-Menü verstecken könnte, die nicht funktionsfähig gemacht wird, wenn Javascript aktiviert ist. Doch alle Lösungen zum Ändern der Anzeige Eigenschaft hat nicht funktioniert.

Also, was ich tat, wurde zum ersten Mal eine ID (Ddown) mit dem div-Element rund um das Dropdown-Menü zugeordnet.

Dann im Kopfteil des HTML-Dokuments, habe ich diese in: 

<noscript>
    <style>
        #ddown {display:none;}
    </style>
</noscript>

Und das gerade gearbeitet. Keine Abhängigkeit von JavaScript, jQuery oder andere Skript. Nur reiner HTML und CSS

Standard, um die Bits, die Sie ausblenden möchten wie display:none gestylt und schalten Sie sie auf mit jQuery oder JavaScript.

  

Durch die Art und Weise, ist es der Mühe wert,   Und heute?

Ja, es ist besorgniserregend im Wert von rund Zugänglichkeit. Sie sollten progressive Erweiterung verwenden, wo möglich, das heißt eine Basisversion, dass Arbeiten ohne Scripting und dann die Scripting-Funktionalität auf ihn hinzuzufügen.

Ein einfaches Beispiel wäre eine Pop-up-Verbindung sein. Sie könnte man wie folgt vor: 

<a href="javascript:window.open('http://example.com/');">link</a>

Allerdings wäre dieser Link nicht funktionieren, wenn jemand, sagen wir, Mitte geklickt oder versuchte es mit einem Lesezeichen versehen, oder hatte Skripte deaktiviert usw. Stattdessen Sie die gleiche Sache wie dies tun könnte: 

<a href="http://example.com/" 
   onclick="window.open(this.href); return false;">link</a>

Es ist immer noch nicht perfekt, weil Sie das Verhalten und die Strukturschichten und zur Vermeidung von Inline-Event-Handler trennen sollte, aber es ist besser, weil es mehr zugänglich ist und erfordert kein Scripting.

Die jQuery Art und Weise: 

$(document).ready(function(){
    $("body").removeClass("noJS");
});

Pseudo CSS 

body
    .no-js-content
        display: none;
body.noJS
    .main
        display: none;
    .no-js-content
        display: block;

HTML 

<body class="noJS">
    <div class="main">
        This will show if JavaScript is activated
    </div>
    <div class='no-js-content'>
        This will show when JavaScript is disabled
    </div>
</body>

Wenn der Inhalt nur dann Sinn macht, wenn JavaScript aktiviert ist, dann sollte es eher direkt durch den JavaScript-Code eingefügt werden, als gerendert wird. Dies könnte entweder durch einfach mit HTML-Templates als Strings in Ihrem JavaScript-Code ausgeführt werden, oder mit Ajax, wenn die HTML komplexer ist.

Wie von Reinis ich erwähnt . das die Idee von Progressive Enhancement .

ist

Im Hinblick auf die CSS-Techniken einen Klassennamen auf dem Body-Tag verwendet, würde ich um diesem zu tun, die andere Art und Weise beraten und das Hinzufügen einer ‚js-enabled‘ Klasse den Body-Tag mit JavaScript, das der Seite CSS verändern würde. Dies passt mit meinem obigen Kommentar über alle anfänglichen HTML ‚Nicht-JavaScript-freundlich‘ zu halten.

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