gratis - ¿Cómo detectar si JavaScript está deshabilitado?
no funciona javascript (30)
¿Detectarla 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 hará una solicitud de un recurso especial (probablemente un gif muy pequeño o similar). De esa manera, puede tomar la diferencia entre las solicitudes de página únicas y las solicitudes de su archivo de seguimiento.
Hubo un post esta mañana preguntando sobre cuántas personas deshabilitan JavaScript. Luego comencé a preguntarme qué técnicas podrían usarse para determinar si el usuario la tiene desactivada.
¿Alguien sabe de algunas formas cortas / simples para detectar si JavaScript está deshabilitado? Mi intención es advertir que el sitio no puede funcionar correctamente sin que el navegador tenga habilitado JS.
Eventualmente, me gustaría redirigirlos al contenido que puede funcionar en ausencia de JS, pero necesito esta detección como un marcador de posición para comenzar.
¿Por qué no acaba de poner un controlador de eventos onClick () secuestrado que se activará solo cuando JS esté habilitado y lo utiliza para agregar un parámetro (js = true) a la URL seleccionada / seleccionada (también puede 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 = verdadero), sabe que JS está habilitado y, a continuación, realiza su lógica del servidor.
La desventaja de esto es que la primera vez que un usuario llega a su sitio, marcador, URL, URL generada por el motor de búsqueda, deberá detectar que este es un usuario nuevo, así que no busque el NVP adjunto en la URL. y el servidor tendría que esperar el siguiente clic para determinar si 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, js = true NVP, incluso si el usuario no tiene JS habilitado, aunque en el próximo clic el servidor se sabio si el usuario todavía tiene habilitado JS o no. Suspiro .. esto es divertido ...
Agregar una actualización en meta dentro de noscript no es una buena idea.
Porque la etiqueta de noscript no es compatible con XHTML
El valor del atributo "Actualizar" no es estándar y no debe utilizarse. "Actualizar" quita el control de una página al usuario. El uso de "Actualizar" causará un error en las Pautas de Accesibilidad para el Contenido Web de W3C --- Referencia http://www.w3schools.com/TAGS/att_meta_http_equiv.asp .
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>
Con agradecimiento a Jay.
Como siempre quiero darle al navegador algo que vale 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 las llamadas getElementById, etc.) está diseñada para ser utilizada tal como está, con el supuesto 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, uso .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 nunca 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 espero que tenga algunas ventajas adicionales.
Creo que podría insertar una etiqueta de imagen en una etiqueta de noscript y ver las estadísticas cuántas veces ha visitado su sitio y con qué frecuencia se ha cargado esta imagen.
En algunos casos, hacerlo al revés podría ser suficiente. Agrega 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 cuándo no está cargado, simplemente el estilo de acuerdo con cuando se carga.
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>
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>
He descubierto otro enfoque utilizando css y javascript.
Esto es solo para empezar a juguetear con clases e ids.
El fragmento de CSS:
1. Cree una regla de ID de css y asígnele el nombre #jsDis.
2. Use la propiedad "contenido" para generar un texto después del elemento BODY. (Puedes estilizar esto como desees).
3 Crea una segunda regla de ID de css, nómbrela #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 JavaScript:
1. Crea una función.
2. Agarre el ID de BODY con getElementById y asígnele 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 la etiqueta BODY se le ha dado el ID de #jsDis:
- Si Javascript está habilitado, cambiará por sí mismo el atributo de la etiqueta BODY.
- Si Javascript está deshabilitado, mostrará el contenido de css '': texto de la regla.
Puedes jugar con un contenedor #wrapper, o con cualquier DIV que use JS.
Espero que esto ayude a tener la idea.
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.
Podría establecer 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, configurar un lado del servidor de sesión para el usuario que indica 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 devolver una imagen en blanco 1x1 al navegador. La secuencia de comandos no se ejecutará para los usuarios que tienen JS deshabilitado y, por lo tanto, no se establecerá $ _SESSION [''js_enabled'']. Luego, para las páginas adicionales que recibe este usuario, puede decidir si incluir todos sus archivos JS externos, pero siempre querrá incluir la verificación, ya que algunos de sus usuarios pueden usar el complemento NoScript Firefox o tener JS Deshabilitado 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.
Las personas ya han publicado ejemplos que son buenas opciones para la detección, pero según su requisito de "advertir 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, los ''pop-ups'' en cuando obtiene una credencial, con un mensaje apropiado, luego elimine 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).
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 correctamente sin Javascript. Y una vez que ha comenzado por ese camino, entonces comienza a darse cuenta de que el sitio debería ser a prueba de balas con JS apagado, y eso es una gran parte 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 se pueden hacer redireccionamientos de forma 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 de noscript ocultará todo el contenido de su página y, en su lugar, mostrará el mensaje "no JS" que quiera mostrar. Esto es realmente lo que parece hacer Gmail ... y si es lo suficientemente bueno para Google, lo es para mi pequeño sitio.
No se detecta si el usuario tiene javascript deshabilitado (servidor o cliente). En su lugar, asume que javascript está deshabilitado y crea tu página web con javascript deshabilitado. Esto evita la necesidad de noscript , que debe evitar usar de todos modos porque no funciona bien y es innecesario.
Por ejemplo, simplemente <div id="nojs">This website doesn''t work without JS</div> su 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.
Para aquellos que solo quieren rastrear si js estaba habilitado, ¿qué hay de 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 en un valor predeterminado de FALSE, y la rutina ajax lo establecería en VERDADERO, si JS está habilitado.
Para obligar a los usuarios a habilitar JavaScripts, establezco 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 real del enlace al atributo ''nombre'' de los enlaces y definí un evento onclick global que lee el atributo ''nombre'' y redirige la página allí.
Esto funciona bien para mi base de usuarios, aunque un poco fascista;).
Por ejemplo, podría usar algo como document.location = ''java_page.html'' para redirigir el navegador a una nueva página cargada de scripts. Si no se redirecciona, significa que JavaScript no está disponible, en cuyo caso puede recurrir a CGI ro utines 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
Puede usar un fragmento de código JS simple para establecer el valor de un campo oculto. Cuando vuelve a publicarse, usted sabe si JS estaba habilitado o no.
O puede intentar abrir una ventana emergente que cierre rápidamente (pero que podría ser visible).
También tiene la etiqueta NOSCRIPT que puede usar para mostrar texto para los navegadores con JS desactivado.
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>
Si javascript está deshabilitado, su código del lado del cliente no se ejecutará de todos modos, así que supongo que quiere decir que quiere 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 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 desactivado, pero las solicitudes futuras lo activan.
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 script del lado del servidor obtiene un 0, no JS. Si obtiene un 1, JS!
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 algo de css), ¿alguien conoce una solución que no sea de css?
Te sugiero que vayas por el otro lado escribiendo JavaScript discreto.
Haga que las funciones de su proyecto funcionen para usuarios con JavaScript deshabilitado y, cuando haya terminado, implemente las mejoras de la interfaz de usuario de JavaScript.
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, como esto:
<!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 redireccionará a la página de inicio del sitio web en 0 segundos. Además, también enviará el parámetro javascript = false al servidor.
Una secuencia de comandos 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 sin JavaScript del sitio web al cliente.
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 apropiadas. Por supuesto, esta técnica se basa en la habilitación de cookies!
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 son de javascript, si hay soporte de JS, la clase .no-js será reemplazada y le dará todos los estilos como de costumbre.
document.body.className = document.body.className.replace("no-js","js");
truco utilizado en HTML5 boilerplate http://html5boilerplate.com/ través de modernizr pero puede usar una línea de javascript para reemplazar las clases
las etiquetas de noscript están bien, pero ¿por qué tener cosas adicionales en su html cuando se puede hacer con css?
Verifique las cookies utilizando una solución de servidor puro que he introducido here luego busque javascript eliminando una cookie usando Jquery.Cookie y luego verifique si hay cookies de esta manera, compruebe si hay cookies y javascript
noscript bloques de noscript se ejecutan cuando JavaScript está deshabilitado, y normalmente se usan para mostrar contenido alternativo al que has 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 página siguiente si han llegado a través de un enlace JS / non-JS, o intentar configurar una cookie a través de JS, cuya ausencia implica JS está deshabilitado. Ambos ejemplos son bastante triviales y abiertos a la manipulación, pero entiendes 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 revise sus registros de acceso para ver cuántas veces se ha golpeado esta imagen. Una solución ligeramente burda, 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 aquellos que no son compatibles con js, por lo que si la base de usuarios se orienta principalmente hacia esa área, este podría no ser el mejor enfoque.
<noscript> ni siquiera es necesario, 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, verá el sitio. De lo contrario, verá el mensaje "Por favor, active JavaScript". La mejor manera de probar si JavaScript está habilitado, es simplemente probar y usar JavaScript. Si funciona, está habilitado, si no, entonces no es ...
Supongo que está intentando decidir si ofrecer o no contenido mejorado con JavaScript. Las mejores implementaciones se degradan limpiamente, de modo que el sitio aún funciona sin JavaScript. También asumo que te refieres a la detección del lado del servidor, en lugar de usar el elemento <noscript> 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 configurar una cookie utilizando JavaScript y luego probarla utilizando scripts del lado del servidor en las vistas de página subsiguientes. 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 nuevos visitantes o visitantes que están bloqueando las cookies.