¿Existe un HTML opuesto a <noscript>?
https://stackoverflow.com/questions/30319
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Existe una etiqueta en HTML que solo mostrará su contenido si JavaScript está habilitado?Sé <noscript> funciona al revés, mostrando su contenido HTML cuando JavaScript está desactivado.Pero me gustaría mostrar un formulario en un sitio solo si JavaScript está disponible, diciéndoles por qué no pueden usar el formulario si no lo tienen.
La única manera que conozco de hacer esto es con el document.write(); método en una etiqueta de secuencia de comandos, y parece un poco complicado para grandes cantidades de HTML.
Solución
Podría tener un div invisible que se muestre a través de JavaScript cuando se carga la página.
Otros consejos
La forma más fácil que se me ocurre:
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>
Sin document.write, sin scripts, CSS puro.
Realmente no estoy de acuerdo con todas las respuestas aquí sobre incrustar el HTML de antemano y ocultarlo con CSS hasta que se muestre nuevamente con JS.Incluso sin JavaScript habilitado, ese nodo todavía existe en el DOM.Es cierto que la mayoría de los navegadores (incluso los navegadores de accesibilidad) lo ignorarán, pero todavía existe y puede haber ocasiones extrañas en las que vuelva a molestarlo.
Mi método preferido sería utilizar jQuery para generar el contenido.Si será una gran cantidad de contenido, entonces puede guardarlo como un fragmento de HTML (solo el HTML que desea mostrar y nada de html, cuerpo, encabezado, etc.etiquetas) luego use las funciones ajax de jQuery para cargarlo en la página completa.
prueba.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>
_prueba.html
<p>This is from an HTML fragment document</p>
resultado
<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>
En primer lugar, ¡separe siempre el contenido, el marcado y el comportamiento!
Ahora, si estás usando la biblioteca jQuery (realmente deberías hacerlo, hace que JavaScript sea mucho más fácil), el siguiente código debería funcionar:
$(document).ready(function() {
$("body").addClass("js");
});
Esto le dará una clase adicional en el cuerpo cuando JS esté habilitado.Ahora, en CSS, puede ocultar el área cuando la clase JS no está disponible y mostrar el área cuando JS está disponible.
Alternativamente, puede agregar no-js como clase predeterminada para su etiqueta corporal y use este código:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});
Recuerde que todavía se muestra si CSS está deshabilitado.
Tengo una solución simple y flexible, algo similar a la de Will (pero con el beneficio adicional de ser HTML válido):
Asigne al elemento del cuerpo una clase de "jsOff".Elimine (o reemplace) esto con JavaScript.Tenga CSS para ocultar cualquier elemento con una clase de "jsOnly" con un elemento principal con una clase de "jsOff".
Esto significa que si JavaScript está habilitado, la clase "jsOff" se eliminará del cuerpo.Esto significará que los elementos con una clase de "jsOnly" no tendrán un padre con una clase de "jsOff" y, por lo tanto, no coincidirán con el selector CSS que los oculta, por lo que se mostrarán.
Si JavaScript está deshabilitado, la clase "jsOff" no lo hará ser eliminado del cuerpo.Elementos con "jsOnly" voluntad tener un padre con "jsOff" y así voluntad coincide con el selector CSS que los oculta, así quedarán ocultos.
Aquí está el código:
<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>
Es html válido.Es simple.Es flexible.
Simplemente agregue la clase "jsOnly" a cualquier elemento que desee mostrar solo cuando JS esté habilitado.
Tenga en cuenta que el JavaScript que elimina la clase "jsOff" debe ejecutarse lo antes posible dentro de la etiqueta del cuerpo.No se puede ejecutar antes, ya que la etiqueta del cuerpo aún no estará allí.No debe ejecutarse más tarde, ya que significará que es posible que los elementos con la clase "jsOnly" no sean visibles de inmediato (ya que coincidirán con el selector CSS que los oculta hasta que la clase "jsOff" se elimine del elemento del cuerpo).
Esto también podría proporcionar un mecanismo para el estilo solo js (p. ej. .jsOn .someClass{}) y estilo sin solo js (p. ej. .jsOff .someOtherClass{}).Podrías usarlo para proporcionar una alternativa a <noscript>:
.jsOn .noJsOnly{
display:none;
}
También puede usar Javascript para cargar contenido de otro archivo fuente y generarlo.Sin embargo, puede que sea un poco más negro de lo que estás buscando.
Aquí hay un ejemplo de la forma div oculta:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*[data-when-js-is-on] {
display: none;
}
</style>
<script>
document.getElementsByTagName("style")[0].textContent = "";
</script>
</head>
<body>
<div data-when-js-is-on>
JS is on.
</div>
</body>
</html>
(Probablemente tendrías que modificarlo para un IE deficiente, pero entiendes la idea).
Mi solución
.css:
.js {
display: none;
}
.js:
$(document).ready(function() {
$(".js").css('display', 'inline');
$(".no-js").css('display', 'none');
});
.html:
<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>
El artículo de Alex. Me viene a la mente aquí, sin embargo, solo es aplicable si estás usando ASP.NET; sin embargo, podría emularse en JavaScript, pero nuevamente tendrías que usar document.write();
Puede establecer la visibilidad de un párrafo|div en "oculto".
Luego, en la función 'cargar', puede configurar la visibilidad en 'visible'.
Algo como:
u003Cbody onload="javascript:document.getElementById(rec).style.visibility=visible">nu003Cp style="visibility:visible" id="rec">Este texto se ocultará a menos que javascript esté disponible.</p>
No hay una etiqueta para eso.Necesitarías usar javascript para mostrar el texto.
Algunas personas ya sugirieron usar JS para hacer que CSS sea visible dinámicamente.También puedes generar dinámicamente el texto con document.getElementById(id).innerHTML = "My Content" o crear dinámicamente los nodos, pero el truco de CSS es probablemente el más sencillo de leer.
