如何通过 HTML 的 Noscript 标签在禁用脚本环境下构建降级显示逻辑-html教程-PHP中文网

仅在页面加载时javascript被禁用才生效，用于静态降级；js启用时它不解析，不响应式，须放内并配合语义化结构与服务端兜底。

如何通过 html 的 noscript 标签在禁用脚本环境下构建降级显示逻辑

noscript 标签只在脚本被禁用时生效，且仅对初始渲染有效

浏览器是否执行 <noscript></noscript> 内容，完全取决于页面加载时 JavaScript 是否被禁用（例如用户手动关闭、策略拦截、或某些企业/教育环境强制禁用），而不是看 document.write 或动态插入。一旦页面加载完成，再启用/禁用脚本都不会触发 <noscript></noscript> 的重渲染——它不是响应式容器，也没有生命周期钩子。

常见错误是把它当“备用 DOM 模板”用，比如在 JS 里删掉主内容、再靠 <noscript></noscript> 补上；这行不通，因为 JS 启用时，<noscript></noscript> 根本不会被解析。

只适用于静态降级：比如 JS 加载失败、或用户主动禁用后首次打开页面
不能和 defer / async 脚本竞争渲染时机——它在 HTML 解析阶段就决定是否插入
在 Chromium 系浏览器中，若启用了 chrome://settings/content/javascript 关闭 JS，<noscript></noscript> 会生效；但若只是通过 DevTools 的 “Disable JavaScript” 临时关闭，刷新后才真正生效

把 noscript 放在 body 末尾能避免布局抖动，但必须配合语义化结构

<noscript></noscript> 可以出现在或中，但放在里只能放 <link>、<meta>、<style></style> 等允许标签；想展示替代内容（如提示文字、静态表单、纯 HTML 列表），必须放在内，且建议紧贴实际内容区块之后或末尾。

例如你有一段由 JS 渲染的交互式商品列表，降级方案不是“在 JS 里 render 一个 div”，而是直接写好静态版本，并用 <noscript></noscript> 包裹：

<div id="product-list"></div>
<noscript>
  <section aria-label="商品列表（JavaScript 已禁用）"><h2>推荐商品</h2>
    <ul>
<li>无线耳机 — ¥199</li>
      <li>机械键盘 — ¥459</li>
    </ul></section>
</noscript>

不要把 <noscript></noscript> 放在 <div id="product-list"> 内部——它不会替换该 div，而是作为兄弟节点插入 <li>务必加 <code>aria-label 或其他辅助属性，让屏幕阅读器知道这是降级内容
避免内联样式；降级内容应继承全局 CSS，否则禁用 JS 时样式可能丢失

与 <script nomodule> 配合可覆盖现代模块加载失败场景</script>

<noscript></noscript> 不处理 ES 模块加载失败（如 type="module" 报错）、也不管 import() 动态导入异常。这类情况需要额外兜底：用 <script nomodule></script> 提供旧版 bundle，再用 <noscript></noscript> 应对彻底无 JS 环境。

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

典型组合写法：

<script type="module" src="app.mjs"></script><script nomodule src="app.legacy.js"></script><noscript>
  <p>您的浏览器不支持 JavaScript，部分功能不可用。</p>
  <a href="/basic-mode">进入简化版页面</a>
</noscript>

nomodule 脚本在支持 type="module" 的浏览器中会被忽略，但老浏览器会执行它——这是渐进增强的关键一环
<noscript></noscript> 是最后一道防线：连 nomodule 都不执行的环境（如 JS 全局禁用），才显示其中内容
链接目标（如 /basic-mode）不应依赖前端路由，而应是服务端直出的完整 HTML 页面

服务端渲染（SSR）环境下 noscript 几乎无用，需换思路

如果你用 Next.js、Nuxt 或类似框架做 SSR，HTML 已含完整内容，JS 主要负责 hydration 和交互增强。此时 <noscript></noscript> 不会触发，因为 JS 默认启用，且服务端无法感知客户端 JS 状态。

真要支持 JS 禁用用户，得靠服务端逻辑判断 User-Agent + 请求头（如 Sec-CH-UA-Model 不可靠），更现实的做法是：

在入口 HTML 模板中保留一份静态内容副本，用 <noscript></noscript> 包裹（前提是 SSR 输出的是“JS 启用版”）
或提供明确的 ?nojs=1 查询参数，服务端据此返回无交互、纯语义化 HTML
别依赖 window.navigator.cookieEnabled 之类客户端检测来决定是否插入 <noscript></noscript>——它本身就要 JS 才能运行

最常被忽略的一点：<noscript></noscript> 里的链接、表单、按钮，必须全部指向服务端可处理的 endpoint；任何依赖 fetch / FormData / history.pushState 的行为，在这里都等于不存在。