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

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

  •  09-06-2019
  •  | 
  •  

Question

Existe-t-il une balise HTML qui affichera son contenu uniquement si JavaScript est activé ?Je sais <noscript> fonctionne dans le sens inverse, affichant son contenu HTML lorsque JavaScript est désactivé.Mais je voudrais afficher un formulaire sur un site uniquement 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 c'est avec le document.write(); méthode dans une balise de script, et cela semble un peu compliqué pour de grandes quantités de HTML.

Était-ce utile?

La solution

Vous pourriez avoir un div invisible qui s'afficherait via JavaScript lors du chargement de la page.

Autres conseils

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, du CSS pur.

Je ne suis pas vraiment d'accord avec toutes les réponses ici concernant l'intégration préalable du code HTML et son 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 revient vous mordre.

Ma méthode préférée serait d'utiliser jQuery pour générer le contenu.S'il s'agit de beaucoup de contenu, vous pouvez l'enregistrer sous forme de fragment HTML (juste le code HTML que vous souhaitez afficher et aucun élément HTML, corps, en-tête, etc.balises) puis utilisez les fonctions ajax de jQuery pour le charger dans la page complète.

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>

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

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

$(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.

Alternativement, vous pouvez ajouter no-js comme classe par défaut de votre balise body et utilisez 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é.

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

Donnez à l'élément body une classe de "jsOff".Supprimez (ou remplacez) ceci 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, ils seront donc affichés.

Si JavaScript est désactivé, la classe "jsOff" Ne fera pas être retiré du corps.Éléments avec "jsOnly" volonté avoir un parent avec "jsOff" et donc volonté correspondent au sélecteur CSS qui les cache, ils seront donc masqué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 à l'intérieur de la balise body.Il ne peut pas être exécuté plus tôt, car la balise body ne sera pas encore là.Il ne doit pas être exécuté plus tard car cela signifierait que les éléments avec la classe "jsOnly" pourraient ne pas être visibles immédiatement (car ils correspondront 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 uniquement en js (par ex. .jsOn .someClass{}) et un style sans js uniquement (par ex. .jsOff .someOtherClass{}).Vous pouvez l'utiliser pour offrir une alternative à <noscript>:

.jsOn .noJsOnly{
    display:none;
}

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

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 mauvais IE, mais vous voyez l'idée.)

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>

L'article d'Alex me vient à l'esprit ici, mais cela 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();

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

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

Quelque chose comme:

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

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top