¿Cómo detectar si JavaScript está deshabilitado?

Hubo una publicación esta mañana preguntando cuántas personas deshabilitan JavaScript. Entonces comencé a preguntarme qué técnicas podrían usarse para determinar si el usuario lo tiene deshabilitado.

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

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.

Supongo que está tratando de decidir si entregar o no contenido mejorado de 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 una razón inexplicable.

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

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 algún tipo de mensaje de "este sitio no funciona tan bien sin Javascript" es que debe asegurarse de que su sitio funcione bien sin Javascript. Y una vez que ha comenzado ese camino, comienza a darse cuenta de que el sitio debe ser a prueba de balas con JS apagado, y eso es una gran cantidad de trabajo adicional.

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

... donde todo el contenido de 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 realmente lo que parece hacer Gmail ... 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á deshabilitado, y generalmente se usan 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 next_pageenlace: puede agregar parámetros aquí para que sepa en la página siguiente si provienen de un enlace JS / no JS, o si intenta configurar una cookie a través de JS, cuya ausencia implica JS está desactivado. Ambos ejemplos son bastante triviales y 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, puede hacer algo como:

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

luego verifique sus registros de acceso para ver cuántas veces se ha afectado esta imagen. Una solución ligeramente cruda, 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 aquellos que no admiten js en absoluto, por lo que si su base de usuarios gira principalmente hacia esa área, este podría no ser el mejor enfoque.

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 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 script del lado del servidor obtiene un 0, no JS. Si obtiene un 1, JS!

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

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

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

<noscript>ni siquiera es necesario, y sin 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, verá el sitio. De lo contrario, verá el mensaje "Habilite JavaScript". ¡La mejor manera de probar si JavaScript está habilitado es simplemente intentar usar JavaScript! Si funciona, está habilitado, si no, entonces no está ...

Use una clase .no-js en el cuerpo y cree estilos no javascript basados ​​en la clase padre .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 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?

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, ¿verdad? incluso si la etiqueta noscript no es compatible (solo se requiere un poco de CSS), ¿alguien conoce una solución que no sea CSS?

Puede usar un fragmento JS simple para establecer el valor de un campo oculto. Cuando se publica de nuevo, 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.

Querrás 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>

La etiqueta noscript funciona bien, pero requerirá que cada solicitud de página adicional continúe sirviendo archivos JS inútiles, ya que esencialmente noscript es una verificació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 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á habilitado ($ _SESSION ['js_enabled']). Luego puede enviar una imagen en blanco de 1x1 al navegador. El script no se ejecutará para los usuarios que tienen JS deshabilitado y, por lo tanto, $ _SESSION ['js_enabled'] no se establecerá. Luego, para las páginas adicionales que se ofrecen a este usuario, puede decidir si desea incluir todos sus archivos JS externos, pero siempre querrá incluir la verificación, ya que algunos de sus usuarios podrían estar usando el complemento NoScript Firefox o tener JS deshabilitado temporalmente por alguna otra razón.

Probablemente desee incluir esta verificació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.

Agregue 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.

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

Primero, cualquier parte de una página que necesita JavaScript para ejecutarse correctamente (incluidos los elementos HTML pasivos que se modifican mediante llamadas getElementById, etc.) está diseñada para que se pueda usar tal cual, suponiendo que NO haya javaScript disponible. (diseñado como si no estuviera allí)

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

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

Luego, al comienzo de mi documento, uso .onloado document.readydentro de un bucle de getElementsByName('jsOnly')para .style.display = "";volver a activar los elementos dependientes de JS. De esa manera, los navegadores que no son JS nunca tienen que ver las porciones 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 noscriptetiqueta y espero que tenga algunas ventajas adicionales.

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

<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>

Una solución común es la metaetiqueta junto con noscript para actualizar la página y notificar al servidor cuando JavaScript está deshabilitado, de esta manera:

<!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á deshabilitado, 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 puede analizar el parámetro y saber que JavaScript está deshabilitado. Luego 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, así que supongo que quiere decir que desea que esa información esté disponible en el lado del servidor. En ese caso, noscript es menos útil. En cambio, tendría una entrada oculta y usaría JavaScript para completar un valor. Después de su próxima solicitud o devolución, si el valor está allí, sabe que JavaScript está activado.

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

Por ejemplo, puede usar algo como document.location = 'java_page.html' para redirigir el navegador a una nueva página cargada de scripts. No redirigir implica que JavaScript no está disponible, en cuyo caso puede recurrir a rutinas CGI o insertar el código apropiado entre las etiquetas. (NOTA: NOSCRIPT solo está disponible en Netscape Navigator 3.0 y versiones posteriores).

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

Una técnica que he usado en el pasado es usar JavaScript para escribir una cookie de sesión que simplemente actúa como un indicador 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 adecuadas. Por supuesto, esta técnica depende de 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 en función de su requisito de "avisar que el sitio no puede funcionar correctamente sin que el navegador tenga JS habilitado". Básicamente, agrega un elemento que aparece de alguna manera en la página, por ejemplo, las 'ventanas emergentes' en Stack Overflow cuando gana una insignia, con un mensaje apropiado, luego elimine esto con un 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, puede usar algún tipo de esquema de seguimiento, donde cada página tiene JavaScript que solicitará un recurso especial (probablemente muy pequeño gifo similar). De esa forma, puede tomar la diferencia entre solicitudes de página únicas y solicitudes para su archivo de seguimiento.

¿Por qué no simplemente coloca un controlador de eventos onClick () secuestrado que se activará solo cuando JS esté habilitado, y use esto para agregar un parámetro (js = true) a la URL seleccionada / clicada (también puede detectar una lista desplegable y cambie el valor de agregar un campo de formulario oculto). Entonces, cuando el servidor ve este parámetro (js = true), sabe que JS está habilitado y luego hace su lógica lógica del lado del servidor.
La desventaja de esto es que la primera vez que un usuario ingresa a su sitio, marcador, URL, URL generada por el motor de búsqueda, deberá detectar que se trata de un nuevo usuario, así que no busque el NVP agregado en la URL, y el servidor tendría que esperar el siguiente clic para determinar que el usuario está habilitado / deshabilitado JS. Además, otra desventaja 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 Tenga cuidado al saber si el usuario todavía tenía JS habilitado o no. Suspiro ... esto es divertido ...

Para obligar a los usuarios a habilitar JavaScripts, configuro el atributo 'href' de cada enlace en el 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 'nombre' de los enlaces y definí un evento global de clic que lee el atributo 'nombre' 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 (lado del servidor o cliente). En su lugar, asume que javascript está deshabilitado y crea su página web con javascript deshabilitado. Esto evita la necesidad noscript, que debe evitar de todos modos porque no funciona del todo bien y es innecesario.

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

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

Verifique si hay cookies utilizando una solución pura del lado del servidor que he introducido aquí, luego verifique si tiene javascript colocando una cookie usando Jquery.Cookie y luego verifique si hay cookies de esta manera, verifique tanto las cookies como javascript

En algunos casos, hacerlo al revés podría ser suficiente. Agregue 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 intentar detectar cuándo no está cargado, simplemente diseñe de acuerdo a cuándo está cargado.

Me gustaría agregar mi solución para obtener estadísticas confiables sobre cuántos usuarios reales visitan mi sitio con JavaScript deshabilitado sobre el total de usuarios. La verificación se realiza una sola vez por sesión con estos beneficios:

• Los usuarios que visitan 100 páginas o solo 1 se cuentan 1 cada uno. Esto permite enfocarse en usuarios individuales, no en páginas.
• No interrumpe el flujo de la página, la estructura o la semántica de ninguna manera
• Podría registrar el agente de usuario. ¡Esto permite excluir bots de estadísticas, como google bot y bing bot que generalmente tienen JS desactivado! También podría registrar IP, tiempo, etc.
• Solo una comprobación por sesión (sobrecarga mínima)

Mi código usa PHP, mysql y jquery con ajax pero podría adaptarse a otros idiomas:

Cree una tabla en su base de datos como esta:

CREATE TABLE IF NOT EXISTS `log_JS` (
  `logJS_id` int(11) NOT NULL AUTO_INCREMENT,
  `data_ins` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `session_id` varchar(50) NOT NULL,
  `JS_ON` tinyint(1) NOT NULL DEFAULT '0',
  `agent` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`logJS_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Agregue esto a cada página después de usar session_start () o equivalente (se requiere jquery):

<?  if (!isset($_SESSION["JSTest"]))
    { 
        mysql_query("INSERT INTO log_JS (session_id, agent) VALUES ('" . mysql_real_escape_string(session_id()) . "', '" . mysql_real_escape_string($_SERVER['HTTP_USER_AGENT']). "')"); 
        $_SESSION["JSTest"] = 1; // One time per session
        ?>
        <script type="text/javascript">
            $(document).ready(function() { $.get('JSOK.php'); });
        </script>
        <?
    }
?>

Cree la página JSOK.php así:

<?
include_once("[DB connection file].php");   
mysql_query("UPDATE log_JS SET JS_ON = 1 WHERE session_id = '" . mysql_real_escape_string(session_id()) . "'");

He descubierto otro enfoque usando CSS y JavaScript.
Esto es solo para comenzar a jugar con clases e identificadores.

El fragmento de CSS:
1. Cree una regla de ID de CSS y asígnele el nombre #jsDis.
2. Utilice la propiedad "contenido" para generar un texto después del elemento BODY. (Puede diseñar esto como desee).
3 Cree una segunda regla de ID de CSS y asígnele el nombre #jsEn, y estilícela. (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 JavaScript:
1. Cree una función.
2. Tome el ID del CUERPO con getElementById y asígnelo 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 del elemento BODY 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 que la etiqueta BODY recibió el ID de #jsDis:
- Si Javascript está habilitado, cambiará por sí mismo el atributo de la etiqueta BODY.
- Si Javascript está desactivado, mostrará el texto de la regla 'contenido:' de css.

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. Debido a que la etiqueta noscript no es compatible con XHTML

2. El valor del atributo "Actualizar" no es estándar y no debe utilizarse. "Actualizar" le quita el control de una página al usuario. El uso de "Actualizar" provocará una falla en las Pautas de Accesibilidad al Contenido en la Web del W3C --- Consulte http://www.w3schools.com/TAGS/att_meta_http_equiv.asp .