como - enable javascript chrome
¿Cómo ocultar partes de HTML cuando JavaScript está deshabilitado? (6)
Por cierto, ¿vale la pena el esfuerzo hoy en día?
Sí, vale la pena preocuparse por la accesibilidad. Debería usar mejoras progresivas siempre que sea posible, es decir, cree una versión básica que funcione sin scripts y luego agregue la funcionalidad de scripts encima.
Un ejemplo simple sería un enlace emergente. Podrías hacer uno así:
<a href="javascript:window.open(''http://example.com/'');">link</a>
Sin embargo, este enlace no funcionaría si alguien, por ejemplo, haga clic con el botón central o intente marcarlo, o tenga scripts deshabilitados, etc. En su lugar, podría hacer lo mismo de esta manera:
<a href="http://example.com/"
onclick="window.open(this.href); return false;">link</a>
Aún no es perfecto, porque debe separar las capas de comportamiento y estructura y evitar los controladores de eventos en línea, pero es mejor, porque es más accesible y no requiere scripts.
Estoy tratando de acomodar a los usuarios sin JavaScript. (Por cierto, ¿vale la pena el esfuerzo hoy en día?)
En un archivo HTML, me gustaría que parte de él se ejecute si los scripts están activados, y otra parte si los scripts están desactivados.
La etiqueta <noscript> me permite hacer lo primero, pero ¿cómo lograr lo último? ¿Cómo puedo marcar una parte de HTML para que el navegador no la analice si los scripts están desactivados ?
De forma predeterminada, los bits que desea ocultar como se display:none estilo como se display:none y enciéndalos con jQuery o JavaScript.
Había estado buscando una manera de hacer esto para poder ocultar un menú desplegable de navegación que se vuelve no funcional cuando javascript está habilitado. Sin embargo, todas las soluciones para cambiar la propiedad de visualización no funcionaron.
Entonces, lo que hice primero se asignó una identificación (ddown) al elemento div que rodea el menú desplegable.
Luego, dentro de la sección principal del documento HTML, agregué esto en:
<noscript>
<style>
#ddown {display:none;}
</style>
</noscript>
Y eso acaba de funcionar. No dependa de javascript, jquery o cualquier otro script: solo HTML puro y CSS.
La forma 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>
Si el contenido solo tiene sentido cuando JavaScript está habilitado, el código JavaScript debe insertarlo directamente en lugar de representarse. Esto se puede hacer simplemente teniendo plantillas HTML como cadenas dentro de su código JavaScript, o usando Ajax si el HTML es más complejo.
Como mencionó Reinis I. esta es la idea de Mejora Progresiva .
Con respecto a las técnicas de CSS de usar un nombre de clase en la etiqueta del cuerpo, recomendaría hacerlo de otra manera y agregar una clase '' js-enabled '' a la etiqueta del cuerpo con JavaScript que alteraría la página CSS. Esto encaja con mi comentario anterior acerca de mantener todo HTML inicial "no compatible con JavaScript".
Aquí hay un video tutorial sobre cómo se puede hacer con jQuery: http://screenr.com/ya7
Código:
<body class="noscript">
<script>
$(''body'').removeClass(''noscript'');
</script>
</body>
Y luego simplemente oculta los elementos relevantes en body.noscript consecuencia.
Sin embargo, JQuery puede estar hinchado por una pequeña solución como esta, por lo que sugiero la respuesta de Zauber Paracelsus, ya que no requiere JQuery.