HTML noscript: contenido alternativo con JavaScript desactivado

HTML <noscript> contiene contenido de reserva para situaciones en las que el navegador no puede usar scripts. No detecta una descarga fallida de JavaScript ni un error de tiempo de ejecución, por lo que debes implementar los mensajes de error por separado.

Los scripts deshabilitados y la ejecución fallida son diferentes

Cuando el navegador está configurado para ejecutar scripts, el contenido dentro de noscript no se muestra como contenido de página ordinario. Un archivo faltante, un error de sintaxis o una excepción en tiempo de ejecución no cambia automáticamente la página a noscript. Si los lectores necesitan orientación cuando una función falla, considera proporcionar un mensaje en el HTML básico y actualizarlo solo después de que el script tenga éxito.

Ejemplo completo: comparar la ejecución exitosa y un error

Guarda el siguiente documento como noscript-demo.html y ábrelo en un navegador. Con JavaScript habilitado, el mensaje inicial cambia a un mensaje de éxito. El ejemplo no utiliza bibliotecas externas ni solicitudes al servidor.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparación del comportamiento de noscript</title>
</head>
<body>
  <h1>Ejercicio sobre el estado del script</h1>
  <p id="status">El script aún no ha actualizado este mensaje.</p>
  <noscript>
    <p>Los scripts no están disponibles. Lee la guía básica que aparece a continuación.</p>
  </noscript>
  <p>Guía básica: puedes leer esta página sin scripts.</p>
  <script>
    if (new URLSearchParams(location.search).has('fail')) {
      throw new Error('Error de ejecución de demostración');
    }
    document.getElementById('status').textContent = 'El script se ha ejecutado.';
  </script>
</body>
</html>

1. Abre el documento con la ejecución de scripts habilitada. La página muestra El script se ha ejecutado. y la guía básica, mientras que el mensaje noscript permanece oculto.
2. Ábrelo de nuevo con ?fail=1 añadido a la dirección. El error de demostración mantiene el mensaje inicial en su lugar, pero el mensaje noscript no aparece porque la ejecución de scripts sigue habilitada. Puedes verificar el error de demostración en la consola de herramientas de desarrollo.
3. Desactiva JavaScript para esta página usando la configuración del navegador o las herramientas de desarrollo, luego recárgala para mostrar el mensaje noscript. Simplemente eliminar el elemento script es una prueba diferente.
4. Después del ejercicio, restaura la configuración original de JavaScript, elimina la cadena de consulta de la dirección y recarga la página.

Si tu entorno restringe las cadenas de consulta en direcciones de archivos, sirve el mismo archivo a través de un servidor web local para compararlo. El menú y el alcance de la desactivación de scripts varían según el navegador y las herramientas de desarrollo, así que revisa la configuración correspondiente. Aplica el cambio temporalmente en la página del ejercicio y restáuralo después en lugar de desactivar la ejecución de scripts en todo el navegador.

Mantener el contenido básico y la guía en body

Coloca párrafos y enlaces de reserva ordinarios dentro de body, como lo hace el ejemplo. El contenido permitido de noscript dentro de head es restringido, así que no coloques párrafos ni botones allí. No anides un noscript dentro de otro.

Si JavaScript genera todas las explicaciones esenciales u opciones de contacto, los lectores pueden perder acceso cuando no se ejecuta. Proporciona contenido en el HTML inicial siempre que sea posible, y luego mejora progresivamente las partes que necesitan interacción. Esto reduce la dependencia únicamente de un mensaje de respaldo. No supongas que noscript proporciona recuperación de errores o funciones de seguridad; la referencia referencia de noscript en MDN explica sus condiciones de visualización.