¿Cómo muestro contenido cuando Javascript no está disponible, lo oculto cuando JavaScript está disponible y no parpadea en ninguno de los casos?

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

Pregunta

Tengo un formulario simple para opciones de envío y estoy usando javascript para enviar automáticamente el formulario cuando alguien selecciona una nueva opción de la lista desplegable.

Para admitir navegadores sin javascript, también hay un botón para enviar el formulario.Este botón está oculto usando javascript.

Sin embargo, esto significa que mi botón está visible durante un breve período de tiempo y puede provocar un parpadeo a medida que se formatea el resto del contenido.

¿Alguien puede sugerir una forma de crear el botón para que comience oculto, pero se haga visible solo si JavaScript no está disponible?por ejemplo, comience con display:none;y mágicamente cambia a display:block;si y sólo si no hay javascript.

¿Fue útil?

Solución

Solo pon cualquier cosa dentro <noscript> ... </noscript> etiquetas y luego solo aparecerá si JavaScript no está habilitado/disponible.

Otros consejos

Depende de cómo lo esté ocultando, ¿está usando un DOM listo o una ventana lista? Window ready espera a que se descarguen todas las imágenes, que generalmente es demasiado tiempo.

Por razones de accesibilidad, lo ocultaría en DOM cargado. Pero para asegurarse de que no aparezca, puede ponerlo en un elemento noscript 

<noscript>
    <input type="submit" />
</noscript>

En cuanto a su último párrafo, nada de eso puede suceder en ausencia de JavaScript.

Simplemente escriba JavaScript discreto: http://icant.co .uk / articles / seven-rules-of-discreto-javascript / .

Lo que debe hacer es escribir su página como una página normal, pero luego usar el código en la parte inferior para iniciar el JavaScript y comenzar a editar la página para que sea más interactiva. Lo bueno de esto es que si tienen JavaScript desactivado, la página es normal, pero si la tienen activada, pueden agregar más funciones.

No soy un gran admirador de la opción, ya que eso puede significar una gran cantidad de código adicional para descargar que no es necesario.

En esta página, vea el comentario 5 para encontrar una buena solución para poder hacer cambios antes de que se muestre algo: http://dean.edwards.name/weblog/2006/06/again/

Puede usar la secuencia de comandos antes y después del botón Enviar para escribir etiquetas de inicio y finalización de elementos div ocultos.

Una opción sería comenzar con el botón que se muestra y luego modificar su CSS desde JavaScript: 

<head>
    ...
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
    <script>
        document.styleSheets[0].addRule(".hideMe", "display:none");
    </script>
    ...
</head>

Modificar la hoja de estilo en lugar del botón (y poner este código fuera de una carga) asegura que estará oculto antes de que se dibuje el botón.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top