¿Cómo detectar si JavaScript está deshabilitado?

Me gustaría añadir 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 algún tipo de mensaje "este sitio no funciona tan bien sin Javascript" es que luego debe asegurarse de que su sitio funcione bien sin Javascript. Y una vez que haya comenzado por ese camino, entonces comienza a darse cuenta de que el sitio debe ser a prueba de balas con JS desactivado, y eso es un gran trozo de adicional trabajo.

Entonces, lo que realmente quieres es una "redirección" a una página que diga "enciende JS, tonto". Pero, por supuesto, no puedes hacer redirecciones de meta 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>

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

noscript los bloques se ejecutan cuando JavaScript está desactivado, y normalmente se utilizan para mostrar contenido alternativo al que ha generado en JavaScript, por ejemplo,

<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 enlace next_page - puede agregar parámetros aquí para saber en la siguiente página si han venido 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á deshabilitado. Ambos ejemplos son bastante triviales y abiertos a la manipulación, pero obtienes 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 revise sus registros de acceso para ver cuántas veces se ha golpeado esta imagen. Una solución un poco cruda, pero te dará una buena idea porcentual para tu base de usuarios.

El enfoque anterior (seguimiento de imágenes) no funcionará bien para los navegadores de solo texto o aquellos que no admiten js en absoluto, por lo que si su base de usuarios se inclina principalmente hacia esa área, esta podría no ser la mejor aproximación.

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>

Si su caso de uso es que tiene un formulario (por ejemplo, un formulario de inicio de sesión) y su script del lado del servidor necesita saber si el usuario tiene JavaScript habilitado, 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 script del lado del servidor obtiene un 0, no hay JS. Si se pone un 1, JS!

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

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

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

Utilice una clase .no-js en el cuerpo y cree estilos no javascript basados en la clase principal .no-js. Si javascript está deshabilitado, obtendrá todos los estilos que no sean javascript, si hay soporte para JS, la clase. no-js será reemplazada dándole todos los estilos como de costumbre.

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

Truco utilizado en HTML5 boilerplate http://html5boilerplate.com / a través de modernizr pero puede 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

<noscript> ni siquiera es necesario, y por no mencionar que no es compatible con 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. Si no, entonces verá el mensaje "Por favor, habilite JavaScript". La mejor manera de probar si JavaScript está habilitado, es simplemente probar y usar JavaScript! Si funciona, está habilitado, si no, entonces no lo está...

Puede usar un simple fragmento de código JS para establecer el valor de un campo oculto. Cuando se publica de nuevo usted sabe si JS estaba habilitado o no.

O puede intentar abrir una ventana emergente que se cierra rápidamente (pero que puede ser visible).

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

La etiqueta noscript funciona bien, pero requerirá cada solicitud de página adicional para continuar sirviendo archivos JS inútiles, ya que esencialmente noscript es una comprobación del lado del cliente.

Puede configurar una cookie con JS, pero como alguien más señaló, esto podría fallar. Idealmente, le gustaría poder detectar el lado del cliente de JS y, sin usar cookies, establecer un lado del servidor de sesión para ese usuario que indique que JS está habilitado.

Una posibilidad es agregar dinámicamente una imagen 1x1 usando JavaScript donde el atributo src es en realidad un script del lado del servidor. Todo lo que hace este script es guardar en la sesión de usuario actual que JS está habilitada ($_SESSION['js_enabled']). A continuación, puede enviar una imagen en blanco de 1x1 al navegador. El script no se ejecutará para los usuarios que tengan JS deshabilitado, y por lo tanto laESSION _SESSION['js_enabled'] no se establecerá. Luego, para otras páginas servidas a este usuario, puede decidir si desea incluir todos sus archivos JS externos, pero siempre querrá incluir la comprobación, ya que algunos de los usuarios pueden estar usando el complemento NoScript Firefox o tener JS desactivado temporalmente por alguna otra razón.

Probablemente querrá incluir esta comprobación en algún lugar cerca del final de su página para que la solicitud HTTP adicional no ralentice la representación de su página.

Añade esto a la etiqueta HEAD de cada página.

<noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>

Así que tienes:

<head>
    <noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
    </noscript>
</head>

Gracias a Jay.

Usted querrá echar un vistazo a la etiqueta noscript.

<script type="text/javascript">
...some javascript script to insert data...
</script>
<noscript>
   <p>Access the <a href="http://someplace.com/data">data.</a></p>
</noscript>

Porque siempre quiero darle al navegador algo que valga la pena mirar a menudo uso este truco:

En primer lugar, cualquier parte de una página que necesita JavaScript para ejecutarse correctamente (incluidos los elementos HTML pasivos que se modifican a través de llamadas getElementById, etc.) están diseñados para ser utilizables tal cual con la suposición de que NO HAY JavaScript disponible. (diseñado como si no estuviera allí)

Cualquier elemento que requiera JavaScript, coloco dentro de una etiqueta algo como:

<span name="jsOnly" style="display: none;"></span>

Luego, al principio de mi documento, utilizo .onload o document.ready dentro de un bucle de getElementsByName('jsOnly') para establecer el .style.display = ""; volviendo a activar los elementos dependientes de JS. De esa manera, los navegadores que no son JS no tienen que ver las partes dependientes de JS del sitio, y si lo tienen, aparece inmediatamente cuando está listo.

Una vez que esté acostumbrado a este método, es bastante fácil hibridar su código para manejar ambas situaciones, aunque solo ahora estoy experimentando con la etiqueta noscript y lo espero tendrá algunas ventajas adicionales.

Solo un poco duro pero (hairbo me dio la idea)

CSS:

.pagecontainer {
  display: none;
}

JS:

function load() {
  document.getElementById('noscriptmsg').style.display = "none";
  document.getElementById('load').style.display = "block";
  /* rest of js*/
}

HTML:

<body onload="load();">

  <div class="pagecontainer" id="load">
    Page loading....
  </div>
  <div id="noscriptmsg">
    You don't have javascript enabled. Good luck with that.
  </div>

</body>

Funcionaría en cualquier caso derecho? incluso si la etiqueta noscript no es compatible (solo se requiere algo de css) ¿alguien conoce una solución no css?

Una solución común es la etiqueta meta en conjunto con noscript para actualizar la página y notificar al servidor cuando JavaScript está deshabilitado, así:

<!DOCTYPE html>
<html lang="en">
    <head>
        <noscript>
            <meta http-equiv="refresh" content="0; /?javascript=false">
        </noscript>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
</html>

En el ejemplo anterior, cuando JavaScript está desactivado, el navegador redirigirá a la página de inicio del sitio web en 0 segundos. Además también enviará el parámetro javascript = false al servidor.

Un script del lado del servidor como node.js o PHP pueden entonces analizar el parámetro y llegar a saber que JavaScript es discapacitado. A continuación, puede enviar una versión especial del sitio web que no sea JavaScript al cliente.

Si javascript está deshabilitado, su código del lado del cliente no se ejecutará de todos modos, por lo que asumo que quiere decir que desea que la información esté disponible en el lado del servidor. En ese caso, noscript es menos útil. En su lugar, tendría una entrada oculta y usaría javascript para completar un valor. Después de su próxima solicitud o postback, si el valor está allí, sabrá que Javascript está activado.

Tenga cuidado con cosas como noscript, donde la primera solicitud puede mostrar javascript deshabilitado, pero las solicitudes futuras lo activan.

Este es el uso de id de solución "más limpio":

<noscript>
    <style>
        body *{ /*hides all elements inside the body*/
            display: none;
        }
        h1{ /* even if this h1 is inside head tags it will be first hidden, so we have to display it again after all body elements are hidden*/
            display: block;
        }
    </style>
    <h1>JavaScript is not enabled, please check your browser settings.</h1>
</noscript>

Podría, por ejemplo, usar algo como document.location = ' java_page.html ' para redirigir el navegador a una nueva página cargada de scripts. Si no se redirige, JavaScript no está disponible, en cuyo caso puede recurrir a utines CGI ro o insertar el código apropiado entre las etiquetas. (NOTA: NOSCRIPT solo está disponible en Netscape Navigator 3.0 y superior.)

Crédito http://www.intranetjournal.com/faqs/jsfaq/how12.html

Una técnica que he utilizado en el pasado es usar JavaScript para escribir una cookie de sesión que simplemente actúa como una bandera para decir que JavaScript está habilitado. Luego, el código del lado del servidor busca esta cookie y, si no se encuentra, toma las medidas apropiadas. ¡Por supuesto, esta técnica se basa en que las cookies estén habilitadas!

Creo que podría insertar una etiqueta de imagen en una etiqueta noscript y ver las estadísticas cuántas veces su sitio y con qué frecuencia se ha cargado esta imagen.

La gente ya ha publicado ejemplos que son buenas opciones para la detección, pero basado en su requisito de "dar advertencia de que el sitio no es capaz de funcionar correctamente sin el navegador JS habilitado". Básicamente agregas un elemento que aparece de alguna manera en la página, por ejemplo, las 'ventanas emergentes' en el Desbordamiento de la pila cuando ganas una insignia, con un mensaje apropiado, luego eliminas esto con un poco de Javascript que se ejecuta tan pronto como se carga la página (y me refiero al DOM, no a toda la página).

¿Detectarlo en qué? JavaScript? Eso sería imposible. Si solo lo desea para fines de registro, podría usar algún tipo de esquema de seguimiento, donde cada página tiene JavaScript que hará una solicitud de un recurso especial (probablemente un gif muy pequeño o similar). De esa manera, solo puede tomar la diferencia entre las solicitudes de página únicas y las solicitudes para su archivo de seguimiento.

¿Por qué no pones un manejador de eventos secuestrado onClick() que se activará solo cuando JS esté habilitado, y lo usas para agregar un parámetro (js=true) a la URL seleccionada/seleccionada (también puedes detectar una lista desplegable y cambiar el valor de agregar un campo de formulario oculto). Así que ahora cuando el servidor ve este parámetro (js = true) sabe que JS está habilitado y luego hacer su lógica de lujo del lado del servidor.
El lado negativo de esto es que la primera vez que un usuario llega a su sitio, marcador, URL, búsqueda URL generada por el motor: deberá detectar que este es un usuario nuevo, así que no busque la NVP anexada a la URL, y el servidor tendrá que esperar al siguiente clic para determinar que el usuario está habilitado/deshabilitado para JS. Además, otro inconveniente es que la URL terminará en la URL del navegador y si este usuario marca esta URL tendrá el js = true NVP, incluso si el usuario no tiene JS habilitado, aunque en el siguiente clic el servidor sería prudente saber si el usuario todavía tiene JS habilitado o no. Suspiro.. esto es divertido...

Para forzar a los usuarios a habilitar JavaScripts, establecí el atributo 'href' de cada enlace al mismo documento, que notifica al usuario que habilite JavaScripts o descargue Firefox (si no saben cómo habilitar JavaScripts). Almacené la url del enlace real al atributo' name 'de los enlaces y definí un evento global onclick que lee el atributo' name ' y redirige la página allí.

Esto funciona bien para mi base de usuarios, aunque un poco fascista ;).

No detecta si el usuario tiene javascript deshabilitado (del lado del servidor o del cliente). En su lugar, asumes que javascript está deshabilitado y construyes tu página web con javascript deshabilitado. Esto elimina la necesidad de noscript, que debe evitar usar de todos modos porque no funciona del todo bien y es innecesario.

Por ejemplo, simplemente construye tu sitio para decir <div id="nojs">This website doesn't work without JS</div>

Entonces, su script simplemente hará document.getElementById('nojs').style.display = 'none'; y seguirá con su negocio normal de JS.

Compruebe si hay cookies utilizando una solución pura del lado del servidor he introducido aquí luego compruebe si hay javascript soltando una cookie usando Jquery.Cookie y luego comprobar si hay cookie de esta manera u comprobar tanto las cookies y javascript

En algunos casos, hacerlo hacia atrás podría ser suficiente. Añadir una clase usando javascript:

// Jquery
$('body').addClass('js-enabled');

/* CSS */
.menu-mobile {display:none;}
body.js-enabled .menu-mobile {display:block;}

Esto podría crear problemas de mantenimiento en cualquier cosa compleja, pero es una solución simple para algunas cosas. En lugar de tratar de detectar cuando no está cargado, solo el estilo de acuerdo a cuando se carga.

He descubierto otro enfoque usando css y javascript en sí.
Esto es solo para empezar a jugar con las clases y las identificaciones.

El fragmento CSS:
1. Cree una regla de ID de css y asígnele el nombre #jsDis.
2. Utilice la propiedad" content " para generar un texto después del elemento BODY. (Puede estilizar esto como desee).
3 Crea una 2da regla de ID de css y nómbrala #jsEn, y estilizala. (en aras de la simplicidad, le di a mi regla #jsEn un color de fondo diferente.

<style>
#jsDis:after {
    content:"Javascript is Disable. Please turn it ON!";
    font:bold 11px Verdana;
    color:#FF0000;
}

#jsEn {
    background-color:#dedede;
}

#jsEn:after {
    content:"Javascript is Enable. Well Done!";
    font:bold 11px Verdana;
    color:#333333;
}
</style>

El Fragmento de código JavaScript:
1. Crear una función.
2. Agarra el ID del CUERPO con getElementById y asígnalo a una variable.
3. Usando la función JS 'setAttribute', cambie el valor del atributo ID del elemento BODY.

<script>
function jsOn() {
    var chgID = document.getElementById('jsDis');
    chgID.setAttribute('id', 'jsEn');
}
</script>

La parte HTML.
1. Nombre el atributo BODY element con el ID de #jsDis.
2. Agregue el evento onLoad con el nombre de la función. (jsOn ()).

<body id="jsDis" onLoad="jsOn()">

Debido a la etiqueta del CUERPO se le ha dado el ID de #jsDis:
- Si Javascript está habilitado, se cambiará por sí mismo el atributo de la etiqueta del CUERPO.
- Si Javascript está deshabilitado, mostrará el texto de la regla css ' content:'.

Puedes jugar con un contenedor #wrapper, o con cualquier DIV que use JS.

Espero que esto ayude a tener la idea.

Agregar una actualización en meta dentro de noscript no es una buena idea.

1. Porque la etiqueta noscript no es compatible con XHTML

2. El valor del atributo "Refresh" no es estándar y no debe usarse. "Refresh" le quita el control de una página al usuario. El uso de "Actualizar" causará un error en las Pautas de Accesibilidad de Contenido web del W3C --- Referencia http://www.w3schools.com/TAGS/att_meta_http_equiv.asp.

Para aquellos que solo quieren rastrear si js estaba habilitado, ¿qué tal usar una rutina ajax para almacenar el estado? Por ejemplo, registro todos los visitantes / visitas en un conjunto de tablas. El campo JSenabled se puede establecer a un valor predeterminado de FALSE, y la rutina ajax lo establecería a TRUE, si JS está habilitado.