Pregunta ¿Cómo detectar si JavaScript está deshabilitado?


Hubo un mensaje esta mañana preguntando cuántas personas desactivan JavaScript. Entonces comencé a preguntarme qué técnicas podrían usarse para determinar si el usuario lo tiene desactivado.

¿Alguien sabe de algunas formas cortas / simples de detectar si JavaScript está deshabilitado? Mi intención es dar una advertencia de que el sitio no puede funcionar correctamente sin que el navegador tenga habilitado JS.

Eventualmente me gustaría redirigirlos a contenido que pueda funcionar en ausencia de JS, pero necesito esta detección como marcador de posición para comenzar.


610


origen


Respuestas:


Supongo que está tratando de decidir si entregar o no contenido mejorado con JavaScript. Las mejores implementaciones se degradan limpiamente, de modo que el sitio todavía funciona sin JavaScript. También supongo que te refieres a la detección del lado del servidor, en lugar de usar el <noscript> elemento por un motivo inexplicado.

No hay una buena forma de realizar la detección de JavaScript en el lado del servidor. Como alternativa, es posible establecer una cookie usando JavaScript y luego probarla mediante el uso de secuencias de comandos del lado del servidor en vistas posteriores de la página. Sin embargo, esto no sería adecuado para decidir qué contenido entregar, ya que no podría distinguir a los visitantes sin la cookie de los visitantes nuevos o visitantes que están bloqueando las cookies.


265



Me gustaría agregar mi .02 aquí. No es 100% a prueba de balas, pero creo que es lo suficientemente bueno.

El problema, para mí, con el ejemplo preferido de poner algo así como "este sitio no funciona tan bien sin Javascript" es que luego debes asegurarte de que tu sitio funciona bien sin Javascript. Y una vez que ha comenzado a recorrer ese camino, comienza a darse cuenta de que el sitio debe ser a prueba de balas con JS apagado, y eso es una gran parte del trabajo adicional.

Entonces, lo que realmente quieres es una "redirección" a una página que dice "activar JS, tonto". Pero, por supuesto, no puede hacer meta redirecciones de manera confiable. Entonces, aquí está la sugerencia:

<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    You don't have javascript enabled.  Good luck with that.
    </div>
</noscript>

...dónde todas del contenido en su sitio está envuelto con un div de clase "pagecontainer". El CSS dentro de la etiqueta noscript ocultará todo el contenido de la página y, en su lugar, mostrará el mensaje "sin JS" que desee mostrar. Esto es en realidad lo que parece hacer Gmail ... y si es lo suficientemente bueno para Google, es lo suficientemente bueno para mi pequeño sitio.


332



noscript los bloques se ejecutan cuando JavaScript está deshabilitado y generalmente se utilizan para mostrar contenido alternativo al generado en JavaScript, p. ej.

<script type="javascript">
    ... construction of ajaxy-link,  setting of "js-enabled" cookie flag, etc..
</script>
<noscript>
    <a href="next_page.php?nojs=1">Next Page</a>
</noscript>

Los usuarios sin js obtendrán el next_page enlace: puede agregar parámetros aquí para saber en la página siguiente si han llegado a través de un enlace JS / no JS, o intentar establecer una cookie a través de JS, cuya ausencia implica que JS está desactivado. Ambos ejemplos son bastante triviales y están abiertos a la manipulación, pero se entiende la idea.

Si desea una idea puramente estadística de cuántos de sus usuarios tienen javascript deshabilitado, podría hacer algo como:

<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>

luego verifica tus registros de acceso para ver cuántas veces se ha tocado esta imagen. Una solución un tanto tosca, pero le dará una buena idea porcentual para su base de usuarios.

El enfoque anterior (seguimiento de imágenes) no funcionará bien para los navegadores de solo texto o para los que no admitan js en absoluto, de modo que si su base de usuarios se mueve principalmente hacia esa área, este podría no ser el mejor enfoque.


189



Esto es lo que funcionó para mí: redirige a un visitante si javascript está deshabilitado

<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>

44



Si su caso de uso es que tiene un formulario (por ejemplo, un formulario de inicio de sesión) y su secuencia de comandos del lado del servidor necesita saber si el usuario tiene habilitado JavaScript, puede hacer algo como esto:

<form onsubmit="this.js_enabled.value=1;return true;">
    <input type="hidden" name="js_enabled" value="0">
    <input type="submit" value="go">
</form>

Esto cambiará el valor de js_enabled a 1 antes de enviar el formulario. Si su secuencia de comandos del lado del servidor obtiene un 0, no hay JS. Si obtiene un 1, JS!


42



Te sugiero que vayas al revés escribiendo JavaScript discreto.

Haga que las funciones de su proyecto funcionen para los usuarios con JavaScript desactivado, y cuando termine, implemente las mejoras de la interfaz de usuario de JavaScript.

https://en.wikipedia.org/wiki/Unobtrusive_JavaScript


40



Use una clase .no-js en el cuerpo y cree estilos que no sean javascript basados ​​en la clase primaria .no-js. Si javascript está deshabilitado, obtendrá todos los estilos que no sean javascript, si hay compatibilidad con JS, la clase .no-js se reemplazará, proporcionándole todos los estilos como siempre.

 document.body.className = document.body.className.replace("no-js","js");

truco utilizado en HTML repetitivo http://html5boilerplate.com/ a través de modernizr pero puedes usar una línea de javascript para reemplazar las clases

Las etiquetas noscript están bien, pero ¿por qué tener cosas adicionales en su html cuando se puede hacer con CSS?


32



<noscript> ni siquiera es necesario, y sin mencionar no soportado en XHTML.

Ejemplo de trabajo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>My website</title>
    <style>
      #site {
          display: none;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js "></script>
    <script>
      $(document).ready(function() {
          $("#noJS").hide();
          $("#site").show();
      });
    </script>
</head>
<body>
    <div id="noJS">Please enable JavaScript...</div>
    <div id="site">JavaScript dependent content here...</div>
</body>
</html>

En este ejemplo, si JavaScript está habilitado, entonces verá el sitio. De lo contrario, verá el mensaje "Habilite JavaScript". La mejor manera de probar si JavaScript está habilitado es simplemente intentar y usar JavaScript. Si funciona, está habilitado, si no, entonces no es ...


26



Puede usar un fragmento de JS simple para establecer el valor de un campo oculto. Cuando se vuelve a publicar, sabe si JS estaba habilitado o no.

O puede intentar abrir una ventana emergente que cierre rápidamente (pero que podría estar visible).

También tiene la etiqueta NOSCRIPT que puede usar para mostrar texto para navegadores con JS deshabilitado.


12