javascript - type - ¿Hay un HTML opuesto a<noscript>?
text javascript html (11)
¿Hay una etiqueta en HTML que solo mostrará su contenido si JavaScript está habilitado? Sé que <noscript> funciona al revés, mostrando su contenido HTML cuando JavaScript está desactivado. Pero me gustaría mostrar solo un formulario en un sitio si JavaScript está disponible, diciéndoles por qué no pueden usar el formulario si no lo tienen.
La única forma en que sé cómo hacerlo es con document.write(); método en una etiqueta de script, y parece un poco desordenado para grandes cantidades de HTML.
Antes que nada, siempre separa el contenido, el marcado y el comportamiento.
Ahora, si está utilizando la biblioteca jQuery (realmente debería, hace que JavaScript sea mucho más fácil), el siguiente código debería hacer:
$(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 la clase predeterminada a su etiqueta de cuerpo y usar este código:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});
Recuerde que todavía se muestra si CSS está deshabilitado.
Aquí hay un ejemplo para la forma div oculto:
<!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 ajustarlo para IE pobre, pero entiendes la idea).
La forma más fácil que puedo pensar:
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>
No document.write, no scripts, pure CSS.
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>
No hay una etiqueta para eso. Necesitarás usar javascript para mostrar el texto.
Algunas personas ya sugirieron usar JS para establecer dinámicamente CSS visible. También podría generar dinámicamente el texto con document.getElementById(id).innerHTML = "My Content" o creando dinámicamente los nodos, pero el hack CSS es probablemente el más sencillo de leer.
Podría tener un div invisible que se muestra a través de JavaScript cuando se carga la página.
Puede establecer la visibilidad de un párrafo | div en ''oculto''.
Luego, en la función ''onload'', puede establecer la visibilidad en ''visible''.
Algo como:
<body onload = "javascript: document.getElementById (rec) .style.visibility = visible"> <p style = "visibility: visible" id = "rec"> Este texto debe ocultarse a menos que javascript esté disponible. </ p>
Realmente no estoy de acuerdo con todas las respuestas aquí acerca de incrustar el HTML de antemano y ocultarlo con CSS hasta que se muestre nuevamente con JS. Incluso si JavaScript no está habilitado, ese nodo aún existe en el DOM. Es cierto que la mayoría de los navegadores (incluso navegadores de accesibilidad) lo ignorarán, pero aún existe y puede haber momentos extraños cuando eso vuelva a morderte.
Mi método preferido sería usar jQuery para generar el contenido. Si será mucho contenido, puede guardarlo como un fragmento de HTML (solo el HTML que quiera mostrar y ninguna de las etiquetas html, body, head, etc.) luego use las funciones ajax de jQuery para cargarlo en la página completa.
test.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>
_test.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>
También podría usar Javascript para cargar contenido desde otro archivo fuente y generarlo. Eso puede ser un poco más caja negra, de lo que estás buscando.
Tengo una solución simple y flexible, algo similar a la de Will (pero con el beneficio adicional de ser un html válido):
Dale al elemento del cuerpo una clase de "jsOff". Eliminar (o reemplazar) esto con JavaScript. Tener 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 significa que los elementos con una clase de "jsOnly" no tendrán un elemento primario con una clase de "jsOff" y, por lo tanto, no coincidirán con el selector de CSS que los oculta, por lo que se mostrarán.
Si JavaScript está desactivado, la clase "jsOff" no se eliminará del cuerpo. Los elementos con "jsOnly" tendrán un elemento primario con "jsOff" y coincidirán con el selector de CSS que los oculta, por lo que se ocultarán.
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 un html válido Es simple. Es flexible
Simplemente agregue la clase "jsOnly" a cualquier elemento que desee que solo se muestre cuando JS esté habilitado.
Tenga en cuenta que el JavaScript que elimina la clase "jsOff" debe ejecutarse lo antes posible dentro de la etiqueta de cuerpo. No se puede ejecutar antes, ya que la etiqueta del cuerpo no estará allí todavía. No debería ejecutarse más tarde, ya que significará que los elementos con la clase "jsOnly" pueden no ser visibles de inmediato (ya que coincidirán con el selector CSS que los oculta hasta que la clase "jsOff" se elimine del elemento body).
Esto también podría proporcionar un mecanismo para el estilo js-only (por ejemplo, .jsOn .someClass{} ) y el estilo no-js-only (por ejemplo, .jsOff .someOtherClass{} ). Puede usarlo para proporcionar una alternativa a <noscript> :
.jsOn .noJsOnly{
display:none;
}
Me viene a la mente el artículo de Alex , sin embargo, solo es aplicable si está usando ASP.NET; podría emularse en JavaScript, pero nuevamente tendría que usar document.write ();