¿Cómo detectar si JavaScript está deshabilitado?

659

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.

MikeJ
fuente
¿Qué quieres hacer con esta información? Podría cambiar la respuesta que obtienes; por ejemplo, la mejora progresiva generalmente se debe favorecer en lugar de tratar de detectar que JavaScript esté deshabilitado y tomar medidas específicas basadas en eso.
Jonny Buchanan el
La mejora progresiva es lo que estoy buscando. Quiero poder redirigirlos a contenido alternativo que funcione correctamente en ausencia de un navegador compatible con JS.
MikeJ
1
@expiredninja Esta publicación de Nicholas Zakas dice alrededor del 2%, aunque tiene más de un año.
sdleihssirhc
La forma más fácil es usar noscript para mostrar sitios que no sean javascript y usar javascript para mostrar cualquier elemento dependiente de javascript modificando la visualización del estilo.
Myforwik

Respuestas:

286

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.

ashleedawg
fuente
129129
<noscript> ES la forma más precisa desde el punto de vista semántico de especificar contenido que no sea JavaScript, y en lugar de detectar si JavaScript está deshabilitado, detecta si está habilitado. Por lo tanto, muestre el mensaje "necesita javascript para usar correctamente mi sitio" de forma predeterminada, pero escóndelo con una función de javascript inmediatamente en Cargar.
matt lohkamp
58
@matt lohkamp: O incluso oculta el mensaje de forma predeterminada y coloca un <style>bloque dentro <noscript>para mostrar (no hay reflujo allí si JS está habilitado). Sorprendentemente, esto funciona en todos los navegadores modernos, e incluso en IE6
Piskvor dejó el edificio el
77
@matt: estuve haciendo esto por un tiempo, pero el mensaje se mantiene durante un tiempo en conexiones lentas, lo que confunde a los usuarios. Estoy aquí buscando una solución diferente. @Piskvor: la etiqueta <noscript> en el encabezado no se validará y una etiqueta <style> en el cuerpo no se validará.
Ben
20
... excepto por qué te preocupa la validación? ¿Estás validando solo para validar? Puede que no sea "correcto", pero si funciona y lo logra "con un poco de suciedad debajo del capó", ¿cuál es el problema? No te preocupes, no voy a juzgar ;-)
keif
44
Sigue siendo válido si solo usa el atributo de estilo para los elementos dados dentro de las etiquetas <noscript> (como <noscript> <div style = "color: red;"> blahblah </div> </noscript> o sg. Similar) . PERO también sigue siendo válido si coloca el <style> BLOCK normalmente en el encabezado que define el estilo de algunos elementos clasificados .noscript (o similares), y en el cuerpo, dentro de las etiquetas <noscript>, simplemente le da a los elementos dados el clase .noscript previamente definida, como esta: <noscript> <div class = "noscript"> blahblah </div> </noscript>
Sk8erPeter
360

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.

hairbo
fuente
12
¿@steve alguna vez intentó validar google.com? la validación solo determina qué tan cerca está el documento de la hoja de especificaciones, de ninguna manera afecta la usabilidad de la página.
JKirchartz
71
@JonasGeiregat ¿Qué hay de malo en obligar al usuario a requerir Javascript si su aplicación web fue construida y requiere Javascript para funcionar? Escucho este comentario con demasiada frecuencia, pero solo es válido para los sitios más simples. Pruebe Facebook sin JS y vea qué sucede. Si su aplicación se creó para Javascript, ¿qué hay de malo en requerir lo que el 99% de los usuarios han habilitado de todos modos?
Lee Benson
19
@Lee lo golpea en el clavo, solo puede hacer mucho por el usuario antes de dibujar la línea sobre lo que apoyará. Esperamos que todos los usuarios tengan un dispositivo habilitado para Internet, ¿también debería implementar una versión en papel de mi sitio para aquellos que se niegan a acceder a Internet?
Kolors
14
@Kolors, hice ese comentario en marzo de 2012, y argumentaría que hoy es doblemente cierto. Desde entonces, hemos tenido Meteor, Angular.Js, Famo.us y un montón de bibliotecas increíbles que requieren incluso Javascript para comenzar . Me pregunto qué usuarios que eligen deshabilitar JS en realidad están tratando de lograr ... claramente, no están navegando en la misma web que el resto de nosotros, y no hay razón para que una compañía deba reducir su sitio web por un mínimo subconjunto de usuarios tercos ...
Lee Benson
66
Sí, y me preguntaba por qué no podía votar tu respuesta, ya que olvidé activar mi JS :-)) ¡Me gusta e implementa tu solución! ¡Gracias!
Garavani
198

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.

ConroyP
fuente
77
Esto no es muy efectivo. Por ejemplo, no contará a nadie con navegadores de solo texto, que normalmente no tienen soporte para JavaScript. Como mínimo, debe deshabilitar el almacenamiento en caché de esa imagen.
Jim
3
¿El navegador que no admite JS no ignora simplemente la etiqueta noscript y muestra la imagen?
LKM
1
@LKM: Depende de cómo estén escritos, lo más probable es que lo hagan, por lo que lo convertirías en un punto 1x1px. Esa opción es principalmente para rastrear patrones de uso del lado del servidor, por lo que aún estaría bien, ya que es activada por un usuario sin capacidad de JavaScript.
ConroyP
Tenga en cuenta que actualmente hay un error con IE8 y la etiqueta noscript si lo diseña ... vea positioniseverything.net/explorer.html
alex
2
también puede servir esa imagen como una secuencia de comandos del lado del servidor, establecer el tipo mime y usarla para registrar cierta información sobre el usuario o colocar una cookie ... px.sklar.com/code.html/id=256
JKirchartz
46

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>
Ernie13
fuente
66
Esto no es valido. Los elementos noscript no pueden contener metaelementos. No confiaría en que esto funcione de manera confiable en todos los navegadores (incluidos los navegadores futuros en los que no puede probar actualmente), ya que pueden realizar la recuperación de errores de diferentes maneras.
Quentin
15
Esto puede no ser válido, pero mire el código de Facebook, usa la misma solución en la parte <head>, lo que no significa que sea una muy buena solución, porque el código de Facebook está lejos de ser un código válido, PERO puede significar que funciona en el navegador de muchos usuarios, lo que puede ser un aspecto importante. Pero es cierto que no se sugiere realmente. Este es su código: <noscript> <meta http-equiv = refresh content = "0; URL = / about / messages /? _ Fb_noscript = 1" /> </noscript>
Sk8erPeter
IE9 (al menos) tiene un ajuste "permitir META REFRESH". No parece que muchos lo apaguen, pero presumiblemente aquellos a los que no les gusta JavaScript sí, pero si quieres el 100%, no es esto.
jenson-button-event
Es válido en HTML5.
Naszta
1
Esto destruye el enlace al intentar compartir en Linkedin, encontramos el camino difícil ... esta no es una buena idea. Dado que linkedin sigue la meta actualización, sin tener en cuenta las etiquetas Og, etc.
SomeDudeSomewhere
44

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!

Andrew Hedges
fuente
44

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

roosteronacid
fuente
146
La vida es demasiado corta. Es 2012: habilite javascript o vaya a casa
Yarin
25
"La vida es demasiado corta. Es 2012 - ¡Habilite JavaScript o vaya a casa!" es un pequeño mensaje perfecto para mostrar en caso de que no haya JS. inició sesión solo para decirle que @Yarin
55
¡También acabo de iniciar sesión para decir que es INCREÍBLE! @Yarin. Estoy creando un sitio pequeño que generalmente no será público (considérelo como una intranet, pero para que los amigos se reúnan para trabajar en un proyecto). Lo estoy haciendo un SPA y no me molesto en hacer una reserva. JavaScript discreto casi duplicaría la carga de trabajo que estoy poniendo en el concepto SPA. Con las bibliotecas javascript modernas como Knockout, Jquery, entre otras, solo tenemos que aceptar que no todos los sitios pueden ser fácilmente "discretos". Javascript es el futuro de la web.
lassombra
55
@Yarin Construyo aplicaciones PHP / JS para ganarme la vida que nunca puse en retroceso ... si no funciona para alguien, me contactan y les digo que dejen de vivir en el pasado y habiliten JS.
Sam
2
@ n611x007 - Las cosas poco éticas se esconden en todo el código, en cada dispositivo, ya sea del lado del servidor o del cliente. No es culpa de los códigos, es culpa de los humanos. Encuentro una campaña contra JS irónica porque todavía usa un ISP de terceros para conectarse a Internet, todavía usa una computadora con hardware / firmware de terceros, todavía usa redes celulares inseguras accesibles por inyecciones de terceros, todavía posee un teléfono celular que usa un sistema operativo sin parches de terceros, aún utiliza un televisor de pantalla plana que utiliza un servicio de actualización abierta de terceros, etc. Siempre es víctima de los canales MITM-ish, independientemente de si apaga JS en su navegador.
dhaupin
35

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

de Raad
fuente
1
Ja, XHTML. Esos fueron los días ... Las cosas han cambiado mucho: developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
Stephan Weinhold
por qué usar jquery ...
Luis Villavicencio
@StephanWeinhold, JSF usa XHTML.
Arash
34

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?

3 revoluciones
fuente
55
¡No puedo creer que haya pasado tanto tiempo antes de que alguien mencionara la .nojsclase! Este es uno de los enfoques más transparentes y se noscriptavergüenza.
Moisés
15

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?

borrel
fuente
13

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.

rslite
fuente
Esta no es una buena respuesta. La primera solución requiere una recarga de página y un envío de formulario. La segunda solución abre una ventana emergente (¡ack!) Y la cierra "rápidamente", ¿desde el lado del cliente? -1
Ben
A veces necesita saber del lado del servidor si un sitio tiene JS habilitado o no, por lo que no veo cómo puede hacerlo además de publicar algo. Estoy de acuerdo en que una ventana emergente es fea y no estoy muy seguro de esto, pero debería ser posible abrir una ventana emergente fuera del área visible de la pantalla para que esto no moleste al usuario. No es elegante pero funciona y no hay recarga de página.
rslite
Spambots también publica en un campo oculto.
Janis Veinbergs
13

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>
anon
fuente
12

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.

David Wees
fuente
12

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.

the_seeker_who
fuente
12

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.

Brian
fuente
10

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>
Alpha2k
fuente
9

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.

Umesh Patil
fuente
8

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.

Joel Coehoorn
fuente
5

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

Brad8118
fuente
4

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.

John Topley
fuente
4

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.

MrVolley
fuente
4

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

roryf
fuente
3

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

Hank Gay
fuente
3

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

Primero FUENTE
fuente
3

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;).

Jan Sahin
fuente
y un poco molesto si el usuario tiene JS habilitado y hace clic en el enlace antes de que su JavaScript progresivo entre en funcionamiento ...
Simon_Weaver
1
Claro, pero aún no se ha informado ningún problema.
Jan Sahin
3

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.

Píldoras de explosión
fuente
este es un excelente enfoque sin interrupciones Las etiquetas <noscript> son mucho más difíciles de mantener en diferentes páginas. Con este enfoque puede mantener su estilo noscript a través de su archivo css.
zadubz
3

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

revs pouya
fuente
3

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.

Jennifer Michelle
fuente
3

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()) . "'");
ininterrumpidas
fuente
3

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.

Chris Pesoa
fuente
2

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 .

Gaurav Talwar
fuente
Nadie dijo nada sobre XHTML. <noscript> es perfectamente válido HTML 4.01 estricto.
Tom
2
noscript también es perfectamente válido en XHTML 1.0 y XHTML 1.1. No puede contener meta elementos, y debe evitarse en favor de la mejora progresiva, pero es parte de los lenguajes.
Quentin