HTML noscript : contenu de repli si JavaScript est désactivé

HTML <noscript> contient un contenu de repli pour les situations où le navigateur ne peut pas utiliser les scripts. Il ne détecte pas un téléchargement JavaScript échoué ou une erreur d'exécution, vous devez donc implémenter les messages d'erreur séparément.

Scripts désactivés et erreur d’exécution : deux situations différentes

Lorsque le navigateur est configuré pour exécuter des scripts, le contenu à l'intérieur de noscript n'est pas affiché comme un contenu de page ordinaire. Un fichier manquant, une erreur de syntaxe ou une exception à l'exécution ne bascule pas automatiquement la page vers noscript. Si les lecteurs ont besoin d'orientation lorsqu'une fonctionnalité échoue, envisagez de fournir un message dans le HTML de base et de le mettre à jour uniquement après la réussite du script.

Exemple complet : comparer une exécution réussie et une erreur

Enregistrez le document suivant sous le nom de noscript-demo.html et ouvrez-le dans un navigateur. Avec JavaScript activé, le message initial se transforme en message de succès. L'exemple n'utilise aucune bibliothèque externe ni requête serveur.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparer le comportement de noscript</title>
</head>
<body>
  <h1>Exercice sur l’état du script</h1>
  <p id="status">Le script n’a pas encore actualisé ce message.</p>
  <noscript>
    <p>Les scripts ne sont pas disponibles. Lisez les instructions de base ci-dessous.</p>
  </noscript>
  <p>Instructions de base : cette page est lisible sans scripts.</p>
  <script>
    if (new URLSearchParams(location.search).has('fail')) {
      throw new Error('Erreur d’exécution de démonstration');
    }
    document.getElementById('status').textContent = 'Le script s’est exécuté.';
  </script>
</body>
</html>

1. Ouvrez le document avec les scripts activés. La page affiche Le script s’est exécuté. et les instructions de base, tandis que le message noscript reste caché.
2. Ouvrez-le à nouveau avec ?fail=1 ajouté à l’adresse. L’erreur de démonstration laisse le message initial en place, mais le message noscript n’apparaît pas car les scripts sont toujours activés. Vous pouvez vérifier l’erreur de démonstration dans la console des outils de développement.
3. Désactivez JavaScript pour cette page en utilisant les paramètres du navigateur ou les outils de développement, puis rechargez-la pour afficher le message noscript. Supprimer simplement l’élément script est un test différent.
4. Après l’exercice, rétablissez le paramètre JavaScript original, retirez la chaîne de requête de l’adresse et rechargez la page.

Si votre environnement restreint les chaînes de requête sur les adresses de fichiers, servez le même fichier via un serveur Web local pour comparaison. Le menu et la portée de la désactivation des scripts varient selon le navigateur et les outils de développement, donc vérifiez les paramètres concernés. Appliquez le changement temporairement à la page d'exercice et rétablissez-le ensuite plutôt que de désactiver le script sur tout le navigateur.

Conserver le contenu de base et les instructions dans body

Mettez des paragraphes de secours ordinaires et des liens à l'intérieur de body, comme le fait l'exemple. Le contenu autorisé de noscript à l'intérieur de head est restreint, donc n'y mettez pas de paragraphes ni de boutons. N’imbriquez pas un noscript à l'intérieur d'un autre.

Si JavaScript génère toutes les explications essentielles ou les options de contact, les lecteurs peuvent perdre l'accès lorsqu'il ne fonctionne pas. Fournissez le contenu dans le HTML initial autant que possible, puis améliorez progressivement les parties nécessitant une interaction. Cela réduit la dépendance à un message de secours uniquement. Ne supposez pas que noscript fournit des fonctionnalités de récupération d'erreur ou de sécurité ; la référence référence MDN de noscript explique ses conditions d'affichage.