HTML noscript 标签：JavaScript 禁用时显示备用内容

HTML <noscript> 包含备用内容，用于浏览器无法使用脚本的情况。它不会检测 JavaScript 下载失败或运行时错误，因此必须单独实现错误消息。

禁用脚本和执行失败是不同的

当浏览器配置为运行脚本时，noscript 内的内容不会以普通页面内容显示。缺失文件、语法错误或运行时异常不会自动将页面切换为 noscript。如果读者在功能失败时需要指导，请考虑在基本 HTML 中提供消息，并仅在脚本成功后更新该消息。

完整示例：比较成功执行和错误情况

将以下文档保存为 noscript-demo.html 并在浏览器中打开。启用 JavaScript 后，初始消息会更改为成功消息。该示例未使用任何外部库或服务器请求。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>比较 noscript 的行为</title>
</head>
<body>
  <h1>脚本状态练习</h1>
  <p id="status">脚本尚未更新此消息。</p>
  <noscript>
    <p>当前无法使用脚本，请阅读下方的基本说明。</p>
  </noscript>
  <p>基本说明：无需脚本也能阅读此页面。</p>
  <script>
    if (new URLSearchParams(location.search).has('fail')) {
      throw new Error('演示用运行时错误');
    }
    document.getElementById('status').textContent = '脚本已执行。';
  </script>
</body>
</html>

1. 在启用脚本的情况下打开文档。页面将显示 脚本已执行。 以及基本指导，而 noscript 消息仍保持隐藏。
2. 再次打开文档，并在地址后附加 ?fail=1。演示错误会保留初始消息，但 noscript 消息不会出现，因为脚本仍然启用。你可以在开发者工具的控制台中查看演示错误。
3. 使用浏览器的设置或开发者工具禁用此页面的 JavaScript，然后重新加载页面以显示 noscript 消息。仅删除 script 元素是另一种测试。
4. 练习结束后，恢复原始 JavaScript 设置，移除地址中的查询字符串，并重新加载页面。

如果您的环境限制文件地址的查询字符串，请通过本地 Web 服务器提供相同的文件以进行比较。菜单和脚本禁用的范围因浏览器和开发者工具而异，因此请检查相关设置。将更改暂时应用到练习页面，然后在结束后恢复，而不是在整个浏览器中禁用脚本。

在 body 中保留基本内容与说明

将普通的备用段落和链接放入 body 中，如示例所示。head 内的 noscript 所允许的内容有限，因此不要在其中放置段落或按钮。不要将一个 noscript 嵌套在另一个里面。

如果 JavaScript 生成所有必要的说明或联系方式，当它无法运行时，读者可能会失去访问权限。尽可能在初始 HTML 中提供内容，然后逐步增强需要交互的部分。这可以减少仅依赖备用消息的情况。不要假设 noscript 提供错误恢复或安全功能；MDN 的 noscript 元素参考 解释了其显示条件。