HTML noscript: conteúdo alternativo com JavaScript desativado

O HTML <noscript> contém conteúdo de reserva para situações em que o navegador não consegue usar scripts. Ele não detecta um download malsucedido de JavaScript ou um erro de tempo de execução, portanto você deve implementar mensagens de erro separadamente.

Scripts desativados e execução falha são diferentes

Quando o navegador está configurado para executar scripts, o conteúdo dentro de noscript não é exibido como conteúdo normal da página. Um arquivo ausente, erro de sintaxe ou exceção em tempo de execução não altera automaticamente a página para noscript. Se os leitores precisarem de orientação quando um recurso falha, considere fornecer uma mensagem no HTML básico e atualizá-la apenas após o script ser executado com sucesso.

Exemplo completo: compare a execução bem-sucedida com um erro

Salve o seguinte documento como noscript-demo.html e abra-o em um navegador. Com o JavaScript ativado, a mensagem inicial muda para uma mensagem de sucesso. O exemplo não utiliza bibliotecas externas nem solicitações ao servidor.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparação do comportamento de noscript</title>
</head>
<body>
  <h1>Exercício sobre o estado do script</h1>
  <p id="status">O script ainda não atualizou esta mensagem.</p>
  <noscript>
    <p>Os scripts não estão disponíveis. Leia as orientações básicas abaixo.</p>
  </noscript>
  <p>Orientação básica: você pode ler esta página sem scripts.</p>
  <script>
    if (new URLSearchParams(location.search).has('fail')) {
      throw new Error('Erro de execução de demonstração');
    }
    document.getElementById('status').textContent = 'O script foi executado.';
  </script>
</body>
</html>

1. Abra o documento com a execução de scripts ativada. A página exibe O script foi executado. e as instruções básicas, enquanto a mensagem noscript permanece oculta.
2. Abra-o novamente com ?fail=1 acrescentado ao endereço. O erro de demonstração mantém a mensagem inicial no lugar, mas a mensagem noscript não aparece porque a execução de scripts ainda está ativada. Você pode verificar o erro de demonstração no console das ferramentas de desenvolvedor.
3. Desative o JavaScript para esta página usando as configurações do navegador ou as ferramentas de desenvolvedor, em seguida recarregue-a para exibir a mensagem noscript. Simplesmente excluir o elemento script é um teste diferente.
4. Após o exercício, restaure a configuração original do JavaScript, remova a string de consulta do endereço e recarregue a página.

Se seu ambiente restringe strings de consulta em endereços de arquivos, sirva o mesmo arquivo através de um servidor web local para comparação. O menu e o escopo de desativação de scripts variam conforme o navegador e as ferramentas de desenvolvedor, então verifique as configurações relevantes. Aplique a alteração temporariamente na página do exercício e restaure-a depois, em vez de desativar os scripts em todo o navegador.

Manter o conteúdo básico e as orientações em body

Coloque parágrafos e links de fallback comuns dentro de body, como o exemplo faz. O conteúdo permitido de noscript dentro de head é restrito, então não insira parágrafos ou botões lá. Não aninhe um noscript dentro de outro.

Se o JavaScript gerar todas as explicações essenciais ou opções de contato, os leitores podem perder o acesso quando ele não for executado. Forneça o conteúdo no HTML inicial sempre que possível, depois melhore progressivamente as partes que necessitam de interação. Isso reduz a dependência de uma mensagem de fallback sozinha. Não presuma que noscript forneça recuperação de erros ou recursos de segurança; a referência referência de noscript na MDN explica suas condições de exibição.