Est-il un HTML en face de <noscript>?
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();
méthode dans une balise script, et il semble un peu brouillon pour de grandes quantités de HTML.
Vous devez vous connecter pour publier un commentaire.
Vous pourriez avoir une invisible div qui sera affiché via JavaScript lorsque le chargement de la page.
Meilleure façon que je peux penser:
Pas de document.écrire, pas de scripts, pur CSS.
display: none !important
, pour éviter d'être écrasé par des règles plus spécifiques (par exemple, par id ou sélecteurs css), qui sont destinés à son usage lorsque les scripts sont activés.<noscript>
la première fois que vous actualisez la page après la désactivation de Javascript dans les préférences. Vous avez besoin de frapper recharger deux fois pour le faire fonctionner.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
_test.html
résultat
Tout d'abord, toujours séparer le 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 doit faire:
Cela vous donnera une classe supplémentaire sur le corps quand JS est activé.
Maintenant, dans le CSS, vous pouvez masquer la zone lorsque le JS classe n'est pas disponible, et montrer de la région lors de la JS est disponible.
Alternativement, vous pouvez ajouter
no-js
comme la classe par défaut de votre balise body, et utilisez ce code:Rappelez-vous qu'il est toujours affiché si le CSS est désactivé.
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" classe ne être éliminés de l'organisme. Éléments avec "jsOnly" sera ont un parent avec "jsOff" et ainsi de sera correspondent au sélecteur CSS qui les cache, donc ils seront cachés.
Voici le code:
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 à<noscript>
:Vous pouvez également utiliser Javascript pour charger le contenu d'un autre fichier source et de sortie. Peut-être un peu plus de la boîte noire-est que vous êtes à la recherche pour le bien.
Voici un exemple pour ce qui est caché div façon:
(Vous auriez probablement à le tordre pour les pauvres, c'est à dire, mais vous voyez l'idée).
Ma solution
.css:
.js:
.html:
Alex article vient à l'esprit ici, cependant, il est applicable uniquement si vous êtes en utilisant ASP.NET - il pourrait être imité dans JavaScript, cependant, mais encore une fois, vous devez utiliser le document.write();
Vous pouvez définir la visibilité d'un paragraphe|div 'caché'.
Puis dans le "onload" la fonction, vous pouvez définir la visibilité de "visible".
Quelque chose comme:
<body onload="javascript:document.getElementById(rec).style.visibilité=visible">
<p style="visibility: visible" id="rec">Ce texte pour être caché, à moins que javascript disponibles.</p>
Il n'y a pas une balise pour que. Vous devez utiliser javascript pour afficher le texte.
Certaines personnes déjà proposé 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 de créer dynamiquement les nœuds, mais le CSS hack est probablement le plus simple à lire.