Comment cacher des parties de HTML lorsque JavaScript est désactivé?

J'essaie d'accueillir les utilisateurs sans JavaScript. (Au fait, cela vaut-il la peine de faire l'effort de nos jours?)Comment cacher des parties de HTML lorsque JavaScript est désactivé?

Dans un fichier HTML, j'aimerais qu'une partie soit exécutée si les scripts sont sur, et une autre partie si les scripts sont désactivés.

La balise <noscript> me permet de faire la première, mais comment atteindre ce dernier? Comment puis-je marquer une partie de HTML afin qu'il ne soit pas analysé par le navigateur si les scripts sont off?

Source

2009-10-16 z-boss

est ici un tutoriel vidéo sur la façon dont cela peut être fait avec jQuery: http://screenr.com/ya7

code:

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

Et puis juste cacher les éléments pertinents sous body.noscript en conséquence.

modifier Cependant, JQuery pourrait être lourd pour une petite solution comme celui-ci, je suggère donc Zauber Paracelsus' answer car il ne nécessite pas JQuery.

Source

2009-10-16 11:56:26 Natrium

@ user2667066 Je pense que vous avez parlé de la mauvaise réponse, puisque ce _is_ la valeur par défaut et ne nécessite JQuery. – Natrium

Eidited and moved, sorry – user2667066

Par défaut, les bits que vous souhaitez masquer s'appellent display:none et les activer avec jQuery ou JavaScript.

Source

2009-10-16 11:50:08

événement onReady est un bon moyen d'aller – Ismael

La façon jQuery:

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

Source

2009-10-16 11:56:23

Par ailleurs, vaut-il la peine de faire l'effort de de nos jours?

Oui, cela vaut la peine d'être préoccupé par l'accessibilité. Dans la mesure du possible, vous devez utiliser une amélioration progressive, c'est-à-dire créer une version de base qui fonctionne sans script, puis ajouter la fonctionnalité de script en plus.

Un exemple simple serait un lien pop-up. Vous pouvez faire un comme ceci:

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

Cependant, ce lien ne fonctionnerait pas si quelqu'un, disons, moyen ou cliquée a essayé de créer un signet, ou avait des scripts désactivé, etc. Au lieu de cela, vous pouvez faire la même chose comme ceci:

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

il est toujours pas parfait, parce que vous devez séparer les couches de comportement et la structure et éviter les gestionnaires d'événements en ligne, mais il est préférable, car il est plus accessible et ne nécessite pas de script.

Source

2009-10-16 12:02:53 slikts

Vous n'avez même pas besoin de JavaScript pour ça. juste le nom de votre cible (ou utilisez "target = « _ blank ») – Joe

Je ne pense pas que ce soit le point Reinis commençait à – roryf

Si le contenu n'a de sens que lorsque JavaScript est activé, il doit être inséré directement par le code JavaScript au lieu d'être rendu. Cela peut être fait simplement en ayant des modèles HTML sous forme de chaînes dans votre code JavaScript, ou en utilisant Ajax si le code HTML est plus complexe.

Comme mentioned by Reinis I. c'est l'idée de Progressive Enhancement. En ce qui concerne les techniques CSS d'utiliser un nom de classe sur l'étiquette du corps, je conseille de faire l'inverse et d'ajouter une classe 'js-enabled' à l'étiquette du corps avec JavaScript qui modifierait la page CSS. Cela correspond à mon commentaire ci-dessus à propos de garder tout le HTML initial «non-JavaScript friendly».

Source

2009-10-16 12:14:48 roryf

que je recherchais autour d'une façon de faire pour que je puisse cacher un menu déroulant de navigation qui obtient rendu non fonctionnel lorsque javascript est activé. Cependant, toutes les solutions pour modifier la propriété d'affichage n'ont pas fonctionné.

Alors, ce que je faisais d'abord été attribué un ID (ddown) à l'élément div entourant le menu déroulant.

Ensuite, dans la section de tête du document HTML, j'ai ajouté ceci dans:

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

Et que tout a fonctionné. Aucune dépendance sur javascript, jquery, ou tout autre script: juste du HTML pur et du CSS.

Source

2012-12-13 10:25:02

Cela devrait être la réponse par défaut - simple, et ne nécessite pas JQuery – user2667066

Pour une raison quelconque ce ISN ne fonctionne pas correctement dans ma page. Même si JS est activé, il masque toujours le sélecteur dans ''. Ma page est XHTML au fait. – alej27

Comment cacher des parties de HTML lorsque JavaScript est désactivé?

Répondre

Questions connexes