detectar falta de javascript con javascript

buzu · #1 (**permalink**) 22/11/2007, 14:19

Quizá algún día te has encontrado con la situación en que tienes que dar un mensaje al usuario si su navegador no soporta Javascript, ya sea por que ciertas funcionalidades del sitio están basadas en javascript (una mala practica que no recomiendo) o por ciertos efectos coool que has puesto al sitio usando js. Siempre es bueno hacer que el sitio funcione bien sin javascript y agregar las mejoras a base de javascript de forma no intrusiba. Ya hablé en otro post acerca de Graceful degradation. De cualquier modo aun cuando el sitio funciona bien sin javascript es bueno informar al usuario que si tuviera el javascript habilitado podría gozar de una mejor navegación y una experiencia mas placentera.
Pero como informar al usuario que debería activar su javascript? Sencillo. Usando javascript. Pero como si el javacript esta deshabilitado? Bueno en ese caso mi respuesta es NO usando javascript.

Es sencillo y la misma técnica se puede usar para los sitios que no soportan CSS. Se trata de mediante js ocultar el mensaje. Así si js no esta habilitado, el mensaje no se ocultara. Sencillo no?!?, eso es lo que yo llamo una "Solución Inteligente" Para los sitios que no soportan CSS es lo mismo, solo que el elemento se oculta mediante CSS así si el sitio no sports CSS la advertencia no se ocultara.

Eh aqui un ejemplo sencillo.

Código HTML:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<script type="text/javascript">
		window.onload = detectaJS
		function detectaJS(){
			document.getElementById("noJS").innerHTML="";
		}
	</script>
</head>
<body>
<div id="noJS">Hemos detectado que tu browser no soporta Javascript.</div>
</body>
</html>

Aquí eh hecho un ejemplo sencillo para ilustrar el concepto del que hablo. Claro que en un proyecto real la advertencia la haría mas elegante y la acomodaría al diseño de la pagina en cuestión. E incluso incluiría un icono de advertencia y todo aquello.

Notese que eh usado innerHTML = "" Para literalmente desaparecer el contenido del div.

innerHTML es propiedad de Microsoft y no es un estándar por lo que no debería ser usado pero a pesar de ser un elemento NO estandarizado esta ampliamente soportado por la mayoría de los navegadores modernos. Si nos queremos poner "estándar", podríamos usar DOM y CSS para ocultar el elemento pero no lo eh hecho así ya que en caso de que el navegador soporte js pero no DOM o CSS, la advertencia se mostrara sin verdadera razón alguna.

Espero que les sea de ayuda y comenten lo que piensan al respecto.

#2 (**permalink**) 22/11/2007, 19:10

Un buen aporte.
Sin embargo, aunque la solución es "rápida y simple", sería mejor usar las funciones del DOM.
Considerando que los navegadores que soportan el DOM son

Opera 7+
Mozilla Gecko (Mozilla, Firefox, Netscape 6+)
KHTML/WebKit (Konqueror 2+, Safari, OmniWeb 4.5+)
Internet Explorer 5+
iCab 3+ (2- is passive only)
ICEbrowser
Escape/Evo 5 (partial only [and broken])
Tkhtml Hv3 (partial only [and broken])
NetFront 3+ (partial only)
Netgem 4 browser (NetBox) - not tested
OpenTV - not tested
iPanel MicroBrowser with advanced modules - not tested

( http://www.howtocreate.co.uk/tutoria...omintroduction )

creo que pensar en navegadores que no lo soporten es simplemente desperdiciar recursos.

Una solución respetuosa del DOM, podría ser:

Código:

div = document.getElementById("noJS");
div.parentNode.removeChild(div);

Creo que esto soluciona algunos problemitas, sobretodo en el caso de que a noJS le pongamos bordes o estilos particulares. En algunas situaciones, aunque le eliminemos el texto, sigue ocupando espacio en la página. Sobretodo si se le especifica una altura con height en CSS.

Eliminar el nodo es como borrar el div del HTML, por lo que estos problemas quedan resueltos.

Hay que notar, sin embargo, que se supone que el evento load ( body onload="eliminarDiv()" ) se dispara cuando la página ha terminado de cargarse, no durante. Por lo que si la carga se demora, el div no se eliminará inmediatamente, se use el método que se use.

Saludos.

buzu · #3 (**permalink**) 23/11/2007, 02:09

Bien, muy buen punto de vista, como ya lo havia dicho antes se puede hacer con DOM. Yo no pensaba precisamente en la solucion que tu das, yo pensaba mas bien darle un display none o algo asi(CSS). Pero me quedo de a 2 con tu solucion, simplemente fantastico. Aun que el unico cambio que ele haria a tu codigo es, en lugar de declarar la variable como div, lo haria como noJS. Me parece un poco mas descriptivo y evita cionfundir nuestra variable con el elemento div.

Y si, si la pagina demora en cargar se vera el elmento durante un momento. Habra que encontrar una solucion a ese problema.

caricatos · #4 (**permalink**) 23/11/2007, 02:18

Hola:

Y el tag noscript...

Saludos

PatomaS · #5 (**permalink**) 23/11/2007, 02:58

Hola gente

Cita:

Iniciado por caricatos

Hola:

Y el tag noscript...

Saludos

Justamente pensaba en esta opción, que para algo está ¿no?. Pero el maestro se me adelantó

Felicidad

#6 (**permalink**) 23/11/2007, 05:19

Cita:

Iniciado por caricatos

Hola:

Y el tag noscript...

Saludos

Sinceramente, nunca la usé

Es una de esas cositas que uno sabe que existen, pero no las recuerda en el momento justo

Igual, si nos vamos por la fácil, ¿cuál es la gracia?

Saludos.

caricatos · #7 (**permalink**) 23/11/2007, 06:10

Cita:

Iniciado por PatomaS

Hola gente

Justamente pensaba en esta opción, que para algo está ¿no?. Pero el maestro se me adelantó

Felicidad

¡Je, je! Dicen que el que madruga...

Cita:

Iniciado por alvlin

Sinceramente, nunca la usé

Es una de esas cositas que uno sabe que existen, pero no las recuerda en el momento justo

Igual, si nos vamos por la fácil, ¿cuál es la gracia?

Saludos.

Si no me equivoco, solo lo usé para hacer alguna prueba, pero yo tampoco suelo usarlo (y debería)

Saludos

buzu · #8 (**permalink**) 24/11/2007, 14:13

Si, el tag nonscript es otra buena opcion pero no se, nunca se me ha dado usarlo... simplemente no lo recuerdo con tanta frecuencia como deveria.

Igual en los libros que eh leido nunca lo he visto escrito. Eso, claro, no quiere decir que no sea bueno usarlo, solo que no esta tan difundido su uso que se nos olvida su existencia.

pendejo1983 · #9 (**permalink**) 25/11/2007, 10:26