HTML noscript: contenuto alternativo con JavaScript disabilitato

HTML <noscript> contiene contenuto di riserva per situazioni in cui il browser non può usare gli script. Non rileva un download JavaScript fallito o un errore di runtime, quindi è necessario implementare i messaggi di errore separatamente.

Lo scripting disabilitato e l'esecuzione fallita sono cose diverse

Quando il browser è configurato per eseguire script, il contenuto all'interno di noscript non viene visualizzato come contenuto ordinario della pagina. Un file mancante, un errore di sintassi o un'eccezione di runtime non passano automaticamente la pagina a noscript. Se i lettori hanno bisogno di indicazioni quando una funzione fallisce, considera di fornire un messaggio nell'HTML di base e aggiornarlo solo dopo che lo script ha avuto successo.

Esempio completo: confronta esecuzione riuscita e errore

Salva il seguente documento come noscript-demo.html e aprilo in un browser. Con JavaScript abilitato, il messaggio iniziale cambia in un messaggio di successo. L'esempio non utilizza librerie esterne né richieste al server.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Confronto del comportamento di noscript</title>
</head>
<body>
  <h1>Esercizio sullo stato dello script</h1>
  <p id="status">Lo script non ha ancora aggiornato questo messaggio.</p>
  <noscript>
    <p>Gli script non sono disponibili. Leggi le indicazioni di base qui sotto.</p>
  </noscript>
  <p>Indicazione di base: puoi leggere questa pagina senza script.</p>
  <script>
    if (new URLSearchParams(location.search).has('fail')) {
      throw new Error('Errore di esecuzione dimostrativo');
    }
    document.getElementById('status').textContent = 'Lo script è stato eseguito.';
  </script>
</body>
</html>

1. Apri il documento con gli script abilitati. La pagina mostra Lo script è stato eseguito. e le istruzioni di base, mentre il messaggio noscript rimane nascosto.
2. Aprilo di nuovo con ?fail=1 aggiunto all'indirizzo. L'errore della demo lascia il messaggio iniziale al suo posto, ma il messaggio noscript non appare perché gli script sono ancora abilitati. Puoi controllare l'errore della demo nella console degli strumenti per sviluppatori.
3. Disabilita JavaScript per questa pagina utilizzando le impostazioni del browser o gli strumenti per sviluppatori, quindi ricaricala per mostrare il messaggio noscript. Semplicemente eliminare l'elemento script è un test diverso.
4. Dopo l'esercizio, ripristina le impostazioni originali di JavaScript, rimuovi la stringa di query dall'indirizzo e ricarica la pagina.

Se il tuo ambiente limita le query string sugli indirizzi dei file, servi lo stesso file tramite un server web locale per il confronto. Il menu e l'ambito della disabilitazione degli script variano a seconda del browser e degli strumenti per sviluppatori, quindi controlla le impostazioni pertinenti. Applica la modifica temporaneamente alla pagina dell'esercizio e ripristinala successivamente, piuttosto che disabilitare gli script in tutto il browser.

Mantenere il contenuto di base e le indicazioni in body

Metti paragrafi e link di fallback ordinari all'interno di body, come fa l'esempio. Il contenuto consentito di noscript all'interno di head è limitato, quindi non inserire paragrafi o pulsanti lì. Non annidare un noscript dentro un altro.

Se JavaScript genera tutte le spiegazioni essenziali o le opzioni di contatto, i lettori potrebbero perdere l'accesso quando non viene eseguito. Fornisci contenuti nell'HTML iniziale ove possibile, quindi migliora progressivamente le parti che necessitano di interazione. Questo riduce la dipendenza esclusiva da un messaggio di riserva. Non dare per scontato che noscript fornisca il recupero dagli errori o funzioni di sicurezza; il riferimento riferimento MDN per noscript spiega le condizioni della sua visualizzazione.