Existe-t-il un code HTML opposé à <noscript>?

106

Existe-t-il une balise HTML qui n'affichera son contenu que si JavaScript est activé? Je sais que cela <noscript>fonctionne à l'inverse, affichant son contenu HTML lorsque JavaScript est désactivé. Mais je voudrais n'afficher un formulaire sur un site que si JavaScript est disponible, en leur expliquant pourquoi ils ne peuvent pas utiliser le formulaire s'ils ne l'ont pas.

La seule façon dont je sais comment faire cela est d'utiliser la document.write();méthode dans une balise de script, et cela semble un peu compliqué pour de grandes quantités de HTML.

javascript html noscript Re0sless
la source

Réponses:

56

Vous pouvez avoir un div invisible qui s'affiche via JavaScript lorsque la page se charge.

ceejayoz
la source
217

Le moyen le plus simple auquel je puisse penser:

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

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

Pas de document.write, pas de scripts, pur CSS.

Volonté
la source
11
Non autorisé dans la norme xhtml au moins.
Dykam
29
@Dykam: il est autorisé en HTML5: dev.w3.org/html5/spec/Overview.html#the-noscript-element et en pratique, il est pris en charge par pratiquement tous les navigateurs.
Volonté le
3
Il est conseillé de l'utiliser display: none !important, pour éviter qu'elle ne soit remplacée par des règles plus spécifiques (par exemple par des sélecteurs id ou css), qui sont destinées à son utilisation lorsque les scripts sont activés.
Istador
3
Un mot d'avertissement: les versions actuelles de Chrome n'analysent pas les balises à l'intérieur de <noscript>la première fois que vous actualisez une page après avoir désactivé Javascript dans les préférences. Vous devez appuyer deux fois sur recharger pour le faire fonctionner.
Tobia
2
Propre, concis, n'utilise pas javascript. Je l'aime.
Dragas
8

Je ne suis pas vraiment d'accord avec toutes les réponses ici concernant l'incorporation préalable du HTML et le masquage avec CSS jusqu'à ce qu'il soit à nouveau affiché avec JS. Même sans JavaScript activé, ce nœud existe toujours dans le DOM. Certes, la plupart des navigateurs (même les navigateurs d'accessibilité) l'ignoreront, mais il existe toujours et il peut y avoir des moments étranges où cela vous mord.

Ma méthode préférée serait d'utiliser jQuery pour générer le contenu. S'il y a beaucoup de contenu, vous pouvez l'enregistrer en tant que fragment HTML (juste le HTML que vous voudrez afficher et aucune des balises html, body, head, etc.) puis utiliser les fonctions ajax de jQuery pour le charger dans la page entière.

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>

résultat

<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
la source
8

Tout d'abord, séparez toujours le contenu, le balisage et le comportement!

Maintenant, si vous utilisez la bibliothèque jQuery (vous devriez vraiment, cela rend JavaScript beaucoup plus facile), le code suivant devrait faire:

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

Cela vous donnera une classe supplémentaire sur le corps lorsque JS est activé. Désormais, en CSS, vous pouvez masquer la zone lorsque la classe JS n'est pas disponible et afficher la zone lorsque JS est disponible.

Vous pouvez également ajouter no-jscomme classe par défaut à votre balise body et utiliser ce code:

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

N'oubliez pas qu'il est toujours affiché si CSS est désactivé.

Alexanderpas
la source
3

J'ai une solution simple et flexible, un peu similaire à celle de Will (mais avec l'avantage supplémentaire d'être valide html):

Donnez à l'élément body une classe de "jsOff". Supprimez (ou remplacez) cela par JavaScript. Avoir CSS pour masquer tous les éléments avec une classe de "jsOnly" avec un élément parent avec une classe de "jsOff".

Cela signifie que si JavaScript est activé, la classe "jsOff" sera supprimée du corps. Cela signifiera que les éléments avec une classe de "jsOnly" n'auront pas de parent avec une classe de "jsOff" et ne correspondront donc pas au sélecteur CSS qui les cache, donc ils seront affichés.

Si JavaScript est désactivé, la classe "jsOff" ne sera pas supprimée du corps. Les éléments avec « jsOnly » auront un parent avec « jsOff » et ainsi se correspondent au sélecteur CSS qui les cache, ainsi ils seront cachés.

Voici le 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>

C'est du html valide. C'est simple. C'est flexible.

Ajoutez simplement la classe "jsOnly" à tout élément que vous souhaitez afficher uniquement lorsque JS est activé.

Veuillez noter que le JavaScript qui supprime la classe "jsOff" doit être exécuté le plus tôt possible dans la balise body. Il ne peut pas être exécuté plus tôt, car la balise body n'y sera pas encore. Il ne doit pas être exécuté plus tard car cela signifiera que les éléments avec la classe "jsOnly" peuvent ne pas être visibles tout de suite (car ils correspondent au sélecteur CSS qui les cache jusqu'à ce que la classe "jsOff" soit supprimée de l'élément body).

Cela pourrait également fournir un mécanisme pour le style js uniquement (par exemple .jsOn .someClass{}) et le style non js uniquement (par exemple .jsOff .someOtherClass{}). Vous pouvez l'utiliser pour fournir une alternative à <noscript>:

.jsOn .noJsOnly{
    display:none;
}
Spycho
la source
1

Vous pouvez également utiliser Javascript pour charger le contenu d'un autre fichier source et le sortir. C'est peut-être un peu plus de boîte noire que ce que vous recherchez.

Le Schtroumpf
la source
1

Voici un exemple de la méthode div cachée:

<!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>

(Vous devrez probablement le modifier pour un pauvre IE, mais vous voyez l'idée.)

Ombre2531
la source
1

Ma solution

.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
la source
Dans votre exemple html, ne voulez-vous pas terminer les lignes par </span>?
curt
0

L'article d'Alex vient à l'esprit ici, mais il n'est applicable que si vous utilisez ASP.NET - il pourrait cependant être émulé en JavaScript, mais encore une fois, vous devrez utiliser document.write ();

Ross
la source
0

Vous pouvez définir la visibilité d'un paragraphe | div sur «masqué».

Ensuite, dans la fonction «onload», vous pouvez définir la visibilité sur «visible».

Quelque chose comme:

<body onload = "javascript: document.getElementById (rec) .style.visibility = visible"> <p style = "visibilité: visible" id = "rec"> Ce texte doit être masqué sauf si javascript est disponible. </p>


la source
0

Il n'y a pas de balise pour ça. Vous devrez utiliser javascript pour afficher le texte.

Certaines personnes ont déjà suggéré d'utiliser JS pour définir dynamiquement CSS visible. Vous pouvez également générer dynamiquement le texte avec document.getElementById(id).innerHTML = "My Content"ou créer dynamiquement les nœuds, mais le hack CSS est probablement le plus simple à lire.

cpm
la source
0

Dans la décennie qui a suivi cette question, l' HIDDENattribut a été ajouté au HTML. Il permet de masquer directement des éléments sans utiliser de CSS. Comme pour les solutions basées sur CSS, l'élément doit être non masqué par un script:

<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>
Mandrin
la source