¿Hay una etiqueta HTML que haga lo contrario de <noscript>? Es decir, ¿muestra algo de contenido solo si JavaScript está habilitado? Por ejemplo:opuesto a <noscript>
<ifscript>
<h1> Click on the big fancy Javascript widget below</h1>
<ifscript>
Por supuesto <ifscript> en realidad no existe. Sé que podría lograr el mismo resultado agregando <h1> al DOM usando JavaScript, pero si prefiero hacer esto con (X) HTML si es posible.
Gracias, Donal
Allí el <script> es para. Inicialmente oculta la pieza en particular usando CSS y usa JavaScript para mostrarla. Aquí está un ejemplo puntapié inicial básica:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643</title>
<script>
window.onload = function() {
document.getElementById("foo").style.display = 'block';
};
</script>
<style>
#foo { display: none; }
</style>
</head>
<body>
<noscript><p>JavaScript is disabled</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
... o, con poca ayuda de jQueryready() que es un poco tarde con la visualización del contenido:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').show();
});
</script>
<style>
#foo { display: none; }
</style>
</head>
<body>
<noscript><p>JavaScript is disabled</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
para mejorar la experiencia del usuario, considerar la colocación de la <script> llame directamente después del elemento HTML particular que necesita ser alternado, para que no haya "flash de contenido" o "elemento aleatorio". Andrew Moore dio un good example en este tema.
Alternativamente, puede hacerlo (hacky) al revés con <style> en <noscript>. Esta es sintácticamente válida, pero permitió que todos los navegadores de Internet Explorer 6 y superiores, incluyendo el W3C-estricta Opera:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643 with CSS in noscript</title>
</head>
<body>
<noscript>
<style>#foo { display: none; }</style>
<p>JavaScript is disabled
</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
¿Qué tal
<script>
document.write("<h1>Click on the big fancy Javascript widget below</h1>");
</script>
? Convierte para usar el árbol DOM si lo deseas.
Esto es específicamente lo que OP deseaba evitar. Además, document.write()? ¿En 2010? – thepeer
Esto funcionará:
<script type="text/javascript">
if (document != undefined)
{
document.write("Woohoo, JavaScript is enabled!");
}
</script>
<noscript>
Sorry mate, we use JavaScript here.
<noscript>
Sin embargo, es feo y errorprone si desea hacer esto para una página HTML "completa". – BalusC
@BalusC: ¿Por qué lo harías para una página html "completa"? No agregue la etiqueta '
que suelo hacer lo siguiente en mis páginas HTML:
<html>
<head>
<!-- head tags here -->
</head>
<body class="js-off">
<script type="text/javascript">
// Polyglot! This is valid MooTools and jQuery!
$(document.body).addClass('js-on').removeClass('js-off');
</script>
<!-- Document markup here -->
</body>
</html>
Usando esta técnica tiene las siguientes ventajas:
puede orientar ambos navegadores con javascript activado y los que no tienen directamente en su Archivo CSS
Es XHTML (<style> etiquetas en <noscript> no es válida, <noscript> etiquetas en <head> no es válido).
El estilo cambia a primera vista incluso antes de que se muestre el resto de la página. Dispara antes de domReady por lo tanto, no hay flashes de estilo.
De esta manera, cuando se tiene widgets con estilo diferente dependiendo de si JS está habilitado o no, puede definir su estilo en el mismo lugar en el archivo CSS.
<style type="text/css">
#jsWarning {
color: red;
}
#jsConfirm {
color: green;
}
body.js-on #jsWarning,
body.js-off #jsConfirm {
display: none;
}
</style>
<div id="jsWarning">This page requires JavaScript to work properly.</div>
<div id="jsConfirm">Congratulations, JavaScript is enabled!</div>
+1 para esta solución interesante. – OregonGhost
+1 Esta es una buena solución de "mundo real". – BalusC
Espera, las clases js-on y js-off están configuradas para mostrar: ninguna ...? Y también, si está manipulando la etiqueta BODY para que sea invisible, tampoco verá su mensaje noscript. –
Mostrar el elemento en el controlador 'onload' podría hacer que la página vuelva a fluir, moviendo elementos. El elemento tampoco aparecería hasta que todas las imágenes de la página hayan terminado de cargarse, algo nada bueno si estás buscando una imagen grande de un servidor lento :-) La devolución de llamada 'ready' de jQuery no tendría este problema, ya que funciona tan pronto como se analiza el documento. –
Sí, la forma jQuery o CSS-in-noscript es más preferida. – BalusC
El uso del enfoque jQuery no indica realmente que javascript esté deshabilitado en el navegador, podría significar que jQuery no está cargado (bloqueado quizás) o que el CDN no estaba disponible o no, mientras tus videos de YouTube y widgets de Facebook siguen funcionando bien . –