¿Qué navegador no soporta hoy en día JavaScript? Lo cierto es que todos lo hacen. Sin embargo, es posible desactivar JavaScript desde los ajustes del navegador, no solo para todo el navegador, sino incluso para sitios concretos.
Cómo desactivar JavaScript en el navegador
En Chrome, yendo a:Configuración > Privacidad y Seguridad > Configuración de Sitios > Contenido > JavaScript):
En Edge, en Cookies y permisos del sitio > Todos los permisos > JavaScript:
y en Firefox, por citar los 3 más comunes, tienes menos control, pero puedes desactivarlo para todo el navegador yendo a about:config y marcando como false la propiedad javascript.enabled:
En todos los casos puedes desactivarlo temporalmente para un sitio en las herramientas del desarrollador, en la configuración en los navegadores basados en Chromium:
y en la pestaña de depuración en el caso de Firefox:
Finalmente, hay extensiones del navegador del estilo de uBlock Origin y similares, aunque las hay específicas para JavaScript, que bloquean todo tipo de cosas mientras navegamos y que permiten bloquear el JavaScript de páginas concretas.
Detectar JavaScript bloqueado, modo tradicional
De toda la vida ha existido una etiqueta complementaria a <script> y llamada, claro está, <noscript> que sirve precisamente para mostrar contenido cuando los scripts no están permitidos. No tiene ningún misterio: basta con meterla en la página o aplicación como un elemento más, y lo que tenga dentro se mostrará solo en caso de no estar habilitado JavaScript:
<noscript>
⚠️ ¡Debes habilitar JavaScript para que esta página funcione!
</noscript>
Otra manera de lograr lo mismo, aunque más rebuscada, era actuar al modo inverso: partir de la base de que está bloqueado y si no lo está, usar JavaScript para ocultar cosas.
Por ejemplo, supongamos que queremos mostrar un cartel de advertencia de que nuestra aplicación no va a funcionar en caso de que la página actual no pueda ejecutar scripts... Lo que hacemos es colocar el cartel en donde proceda, de modo visible, y meter un script que lo oculte automáticamente nada más cargar la página de modo que no se vea. Si funciona el script, nadie lo verá, pero si JavaScript está bloqueado, entonces el cartel no se toca y estará visible.
Incluso podemos detectar páginas que no bloquean los scripts mientras cargan pero sí bloquean los scripts una vez la página ha cargado (por ejemplo mediante una extensión). Para lo cual podemos establecer un temporizador que lo compruebe al cabo de un rato o incluso capturar el evento de que el DOM está listo o todos los recursos de la página cargados.
Pero esto no dejan de ser "ñapas" que son propensas a errores y que, además, nos hacen comprobar realmente el caso inverso de lo que buscamos.
Soporte nativo en CSS para detección de JavaScript bloqueado
Aunque la funcionalidad que te voy a contar a continuación lleva ya mucho tiempo aprobada, solamente Firefox la había implementado inicialmente. Pero hoy en día todos los navegadores del mercado la soportan, excluyendo alguno móvil (como el de Samsung o el de Xiaomi) que, en cualquier, caso deberías evitar usar por sus "idiosincrasias" (digámoslo así 😉).
Se trata de una media query específica para esta detección llamada scripting. Puede tomar 3 valores:
enabled: los scripts están permitidos con normalidad en la página, que es el caso más común.none: que indica que el navegador, para la página actual, no puede ejecutar script alguno. O sea, sería para cuando está desactivado por completo el soporte para scripting.initial-only: en el caso raro de que se permitan scripts durante la carga de la página (a medida que los descarga y los procesa), pero no posteriormente, cuando ya está cargada.
Gracias a esta media query podemos hacer algo que no era posible antes (o al menos era difícil): cambiar los estilos de ciertos elementos en función de si está activado o no JavaScript en la página. La etiqueta <noscript> solo permitía mostrar algunos contenidos en caso de que no lo estuviera, pero no ocultar otros, por ejemplo, ni cambiarles el aspecto o la distribución.
Ahora puedes escribir, por ejemplo:
@media (scripting: none) {
.full-script-support {
display: none;
}
.no-script-support {
display: block;
border-color: red;
}
.initial-script-support {
display: block;
}
}
En este caso he definido 3 clases para cada caso, de modo que marcando ciertas partes de la interfaz de usuario con ellas puede decidir si se ven o no o qué aspecto tienen. Mucho más flexible que meter contenidos específicos, ya que a lo mejor solo quiero deshabilitar cierta funcionalidad pero no otra, o marcar algunas zonas de forma especial, etc...
No solo puedo definir clases, sino que puedo utilizar cualquier selector y propiedad CSS que desee, por lo que la flexibilidad es total.
Al final es una pequeña cosa, pero que nos ayuda a la hora de diseñar nuestras aplicaciones teniendo en cuenta la filosofía de mejora progresiva sin tener que complicarnos la vida y pudiendo tener en cuenta el caso extremo de que un usuario nos haya bloqueado JavaScript y eche por tierra parte o toda la funcionalidad de nuestro desarrollo Web.
¡Espero que te resulte útil!