Y at-il un HTML opposé à <noscript> ?

Question

Y at-il un HTML opposé à <noscript> ?

Demandé el 27 de Août, 2008: Quand la question a-t-elle été
8787 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Est-il une balise dans le code HTML qui affichera uniquement de son contenu si JavaScript est activé? Je sais noscript fonctionne à l'inverse autour de, en affichant son contenu HTML lorsque JavaScript est désactivé. Mais je voudrais seulement l'affichage d'un formulaire sur un site si JavaScript est disponible, de leur dire pourquoi ils ne peuvent pas utiliser le formulaire si ils ne l'ont pas.

La seule façon que je sais comment faire, c'est avec le document.write(); la méthode dans une balise script, et il semble un peu brouillon pour de grandes quantités de HTML.

Merci

Demandé el 27 de Août, 2008 par Re0sless

Answer 1

5 Réponses

Answer 2

231voto

Will Points 2848

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

Répondu el 10 de Janvier, 2009 par Will (2848 Points )

Answer 3

63voto

ceejayoz Points 85962

Vous pourriez avoir un div invisible qui est affiché via JavaScript lors du chargement de la page.

Répondu el 27 de Août, 2008 par ceejayoz (85962 Points )

Answer 4

8voto

alexanderpas Points 1801

Tout d'abord, toujours séparée de contenu, de balisage et de comportement!

Maintenant, si vous êtes en utilisant la bibliothèque jquery (vous devriez vraiment, il rend javascript beaucoup plus facile). Le code suivant devrait le faire:

<pre><code>
$(document).ready(function() {
    $("body").addClass("js");
});
</code></pre>

Cela vous donne une classe supplémentaire sur le corps quand JS est activé. Maintenant, dans le css, vous pouvez masquer la zone avec du css lors de la js classe n'est pas disponible, et montrer de la région lors de la js est disponible.

Alternativement, vous pouvez ajouter no-js la valeur par défaut de la classe à votre balise body, et utilisez ce code:


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

Rappelez-vous qu'il est toujours affiché si le CSS est désactivé.

Répondu el 4 de Août, 2009 par alexanderpas (1801 Points )

Answer 5

8voto

Chrisbloom7 Points 1386

Je n'ai pas vraiment d'accord avec toutes les réponses ici sur l'incorporation de l'HTML à l'avance et de les cacher avec du CSS jusqu'à ce qu'il est de nouveau illustré avec JS. Même w/o JavaScript activé, ce dernier existe toujours dans les DOM. Vrai, la plupart des navigateurs (même à l'accessibilité des navigateurs) l'ignore, mais il existe toujours et il peut y avoir des moments étranges quand cela revient à vous mordre.

Mon préféré de la méthode à utiliser jQuery pour générer le contenu. Si il va y avoir beaucoup de contenu, puis vous pouvez l'enregistrer comme un fragment HTML (juste le code HTML que vous voulez montrer et aucun code html, le corps, la tête, etc. tags), puis l'utilisation de jQuery ajax fonctions 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>

Répondu el 24 de Août, 2010 par Chrisbloom7 (1386 Points )

Answer 6

3voto

Spycho Points 2571

J'ai une simple et une solution flexible, un peu semblable à Volonté (mais avec l'avantage supplémentaire d'être valide en html):

Donne au corps de l'élément d'une classe de "jsOff". Supprimer (ou remplacer) cette avec JavaScript. Avoir CSS pour cacher 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é, le "jsOff" classe sera éliminé de l'organisme. Cela signifie que des éléments avec une classe de "jsOnly" n'auront pas d'un parent avec une classe de "jsOff" et donc ne pas correspondre au sélecteur CSS qui les cache, ainsi, ils seront affichés.

Si JavaScript est désactivé, le "jsOff" de la classe ne va pas être éliminés de l'organisme. Éléments avec "jsOnly" va avoir un parent avec "jsOff" et donc aura correspondent au sélecteur CSS qui les cache, donc 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 un code html valide. C'est simple. Il est flexible.

Il suffit d'ajouter le "jsOnly" classe à n'importe quel élément que vous souhaitez afficher uniquement quand JS est activé.

Veuillez noter que le code JavaScript qui supprime le "jsOff" classe doit être effectuée le plus tôt possible à l'intérieur de la balise body. Il ne peut être exécuté plus tôt, comme le corps de la balise ne sera pas encore là. Il ne doit pas être exécuté plus tard que cela signifie que des éléments avec les "jsOnly" classe peut ne pas être visible tout de suite (car ils correspondent au sélecteur CSS qui cache jusqu'à ce que le "jsOff" la classe est supprimée à partir de l'élément de corps).

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

.jsOn .noJsOnly{
    display:none;
}

Répondu el 3 de Juin, 2011 par Spycho (2571 Points )

Y at-il un HTML opposé à <noscript> ?

Réponses

test.html

_test.html

résultat

Questions en vedette

Top Tags

Prograide.com

Powered by:

Y at-il un HTML opposé à <noscript> ?

Réponses

test.html

_test.html

résultat

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: