PHP小码农

Appearance

noscript 标签 ​

<noscript> 元素用于定义在用户浏览器禁用 JavaScript 或浏览器不支持 JavaScript 时显示的替代内容。它提供了一种优雅降级的方式，确保没有 JavaScript 的用户也能获得基本的页面体验。

前置知识

阅读本节前，建议先了解：style 内联样式

基础概念 ​

noscript 的作用 ​

当用户的浏览器中 JavaScript 被禁用时，<noscript> 标签内的内容会被显示；当 JavaScript 启用时，<noscript> 标签内的内容会被忽略。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>noscript 示例</title>
</head>
<body>
  <h1>我的网站</h1>

  <!-- JS 启用时显示，JS 禁用时隐藏 -->
  <div id="app">
    <p>JavaScript 已启用，正常显示内容。</p>
  </div>

  <!-- JS 禁用时显示，JS 启用时隐藏 -->
  <noscript>
    <div style="padding: 20px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; text-align: center;">
      <h2>请启用 JavaScript</h2>
      <p>本网站需要 JavaScript 才能正常使用。</p>
      <p>请在浏览器设置中启用 JavaScript，然后刷新页面。</p>
    </div>
  </noscript>
</body>
</html>

为什么需要 noscript ​

  1. 无障碍性：部分用户因安全原因禁用 JavaScript
  2. SEO 考虑：搜索引擎爬虫通常不执行 JavaScript
  3. 网络问题：JavaScript 文件加载失败时，noscript 提供兜底体验
  4. 隐私保护：某些隐私浏览器（如 Tor Browser）默认禁用 JS

语法 ​

基本语法 ​

html
<noscript>
  <!-- 替代内容：纯 HTML -->
</noscript>

noscript 的位置 ​

<noscript> 可以出现在 <head> 和 <body> 中，但根据位置不同，可以包含的内容也不同：

位置可以包含的内容
<head> 中<meta>、<link>、<style> 等元信息标签
<body> 中任何 HTML 内容（文字、图片、链接等）

详细说明 ​

head 中的 noscript ​

在 <head> 中，<noscript> 通常用于提供替代的样式或重定向：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>noscript 演示</title>

  <!-- JS 启用时使用的样式 -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/no-js.css">

  <!-- JS 禁用时使用的样式 -->
  <noscript>
    <!-- 提供替代的样式 -->
    <link rel="stylesheet" href="css/no-script.css">
    <!-- 重定向到无 JS 版本 -->
    <meta http-equiv="refresh" content="0;url=/no-js-version.html">
  </noscript>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>
css
/* no-script.css - JS 禁用时的样式 */
.js-only { display: none !important; }
.no-js-only { display: block !important; }
.no-js-warning {
  display: block;
  padding: 20px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  text-align: center;
  font-size: 18px;
}

body 中的 noscript ​

在 <body> 中，<noscript> 可以包含任何可见的 HTML 内容：

html
<body>
  <header>
    <h1>我的网站</h1>
    <!-- 搜索功能依赖 JS -->
    <div class="search-box js-only">
      <input type="text" placeholder="搜索...">
      <button>搜索</button>
    </div>
  </header>

  <main>
    <!-- 动态加载的内容区域 -->
    <div id="dynamic-content"></div>
  </main>

  <!-- JS 禁用时显示的替代内容 -->
  <noscript>
    <div class="no-js-warning">
      <h2>请启用 JavaScript</h2>
      <p>本网站的搜索和动态功能需要 JavaScript 支持。</p>
      <p>请按照以下步骤启用 JavaScript：</p>
      <ol>
        <li>打开浏览器的"设置"</li>
        <li>找到"隐私和安全"或"内容设置"</li>
        <li>启用"JavaScript"</li>
        <li>刷新页面</li>
      </ol>
      <p>如果您不想启用 JavaScript，可以访问我们的
        <a href="/no-js-version.html">纯 HTML 版本</a>。</p>
    </div>
  </noscript>
</body>

noscript 与 CSS .no-js 技巧 ​

一种常用的模式是结合 <html> 的 class 属性和 CSS 来处理 JS 禁用的情况：

html
<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>no-js 技巧</title>
  <style>
    /* JS 禁用时显示提示 */
    .no-js .js-warning {
      display: block;
      padding: 20px;
      background: #fff3cd;
      border: 1px solid #ffc107;
      text-align: center;
      margin: 20px;
    }

    /* JS 启用时隐藏提示 */
    .js .js-warning {
      display: none;
    }

    /* JS 启用时显示动态内容容器 */
    .js-only {
      display: none;
    }
    .js .js-only {
      display: block;
    }
  </style>

  <!-- JS 禁用时的替代样式 -->
  <noscript>
    <style>.no-js .js-warning { display: block; }</style>
  </noscript>
</head>
<body>
  <div class="js-warning">
    <h2>请启用 JavaScript</h2>
    <p>本网站需要 JavaScript。</p>
  </div>

  <div class="js-only">
    <h1>JavaScript 已启用</h1>
    <p>动态内容将在这里加载。</p>
  </div>

  <!-- 页面加载后移除 no-js，添加 js -->
  <script>
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>
</body>
</html>

为什么推荐 .no-js 技巧

直接使用 <noscript> 标签无法用 CSS 控制其样式（因为它不存在于 DOM 中）。而 .no-js 技巧让 CSS 可以灵活地控制元素的显示和隐藏。

noscript 的 SEO 考虑 ​

搜索引擎爬虫（尤其是 Googlebot）通常不执行 JavaScript，这意味着：

  1. 爬虫能看到 <noscript> 中的内容
  2. 爬虫看不到 JavaScript 动态生成的内容
  3. <noscript> 中的内容会影响搜索引擎对页面的理解

SEO 最佳实践：

html
<body>
  <!-- 搜索引擎和禁用 JS 的用户都能看到的内容 -->
  <h1>文章标题</h1>
  <p>文章摘要：这是文章的简要介绍。</p>

  <!-- JS 动态增强的内容（搜索引擎看不到） -->
  <div id="comments" class="js-only">
    <!-- 评论区域通过 JS 动态加载 -->
  </div>

  <!-- noscript 中的内容不应该与页面主体内容重复 -->
  <noscript>
    <p>评论功能需要 JavaScript 支持。</p>
    <p><a href="/article/plain-text">查看纯文本版本</a></p>
  </noscript>
</body>

SEO 注意

不要在 <noscript> 中堆砌关键词或放置与页面无关的内容。搜索引擎会将这些内容纳入排名考量，堆砌关键词可能被视为作弊。

实战示例 ​

完整的 noscript 配置 ​

html
<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>完整的 noscript 配置</title>

  <!-- 基础样式（所有用户可见） -->
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; }

    /* noscript 提示样式 */
    .js-warning {
      padding: 20px;
      margin-bottom: 20px;
      background: #fff3cd;
      border: 1px solid #ffc107;
      border-radius: 8px;
      text-align: center;
    }
    .no-js .js-warning { display: block; }
    .js .js-warning { display: none; }

    /* JS 增强功能隐藏 */
    .js-only { display: none; }
    .js .js-only { display: block; }

    /* 纯 HTML 导航（JS 禁用时使用） */
    .fallback-nav { display: block; }
    .js .fallback-nav { display: none; }

    /* 动态导航（JS 启用时使用） */
    .dynamic-nav { display: none; }
    .js .dynamic-nav { display: flex; }
    .dynamic-nav { gap: 20px; padding: 16px 0; border-bottom: 1px solid #eee; }
    .dynamic-nav a { text-decoration: none; color: #0066cc; }

    /* 功能卡片 */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
      margin: 20px 0;
    }
    .feature-card {
      padding: 20px;
      border: 1px solid #eee;
      border-radius: 8px;
    }
    .feature-card h3 { margin-bottom: 8px; }
  </style>

  <!-- noscript 替代样式 -->
  <noscript>
    <style>
      .no-js .js-only { display: none !important; }
      .no-js .fallback-nav { display: block !important; }
      .no-js .js-warning { display: block !important; }
    </style>
  </noscript>
</head>
<body>
  <!-- JS 禁用时的提示 -->
  <div class="js-warning">
    <h2>请启用 JavaScript</h2>
    <p>本网站的部分功能（如搜索、动态加载、交互式组件）需要 JavaScript 支持。</p>
    <p>您仍然可以浏览以下静态内容。</p>
  </div>

  <!-- 页面头部 -->
  <header>
    <h1>我的网站</h1>

    <!-- 纯 HTML 导航（JS 禁用时显示） -->
    <nav class="fallback-nav">
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
        <li><a href="/contact">联系</a></li>
        <li><a href="/sitemap">网站地图</a></li>
      </ul>
    </nav>

    <!-- 动态导航（JS 启用时显示） -->
    <nav class="dynamic-nav js-only">
      <a href="/">首页</a>
      <a href="/about">关于</a>
      <a href="/blog">博客</a>
      <a href="/contact">联系</a>
    </nav>
  </header>

  <main>
    <!-- 所有用户都能看到的内容 -->
    <h2>功能介绍</h2>
    <div class="feature-grid">
      <div class="feature-card">
        <h3>功能一</h3>
        <p>功能描述，所有用户都能看到。</p>
      </div>
      <div class="feature-card">
        <h3>功能二</h3>
        <p>功能描述，所有用户都能看到。</p>
      </div>
    </div>

    <!-- JS 增强的内容 -->
    <div class="js-only">
      <h2>动态内容</h2>
      <p>这部分内容通过 JavaScript 动态加载。</p>
    </div>
  </main>

  <footer>
    <p>&copy; 2024 我的网站</p>
  </footer>

  <!-- 启用 JS 标记 -->
  <script>
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>
</body>
</html>

检测 JavaScript 是否启用 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS 检测</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
    .status { padding: 15px; border-radius: 8px; margin: 10px 0; font-weight: bold; }
    .enabled { background: #d4edda; color: #155724; }
    .disabled { background: #f8d7da; color: #721c24; }
    code { background: #f5f5f5; padding: 2px 6px; border-radius: 3px; font-size: 14px; }
  </style>
</head>
<body>
  <h1>JavaScript 状态检测</h1>

  <noscript>
    <div class="status disabled">
      JavaScript 已禁用
    </div>
    <p>如果您看到此消息，说明您的浏览器禁用了 JavaScript。</p>
  </noscript>

  <div class="status enabled" id="js-status" style="display:none;">
    JavaScript 已启用
  </div>
  <div id="js-info" style="display:none;">
    <p>Navigator: <code id="user-agent"></code></p>
  </div>

  <script>
    document.getElementById('js-status').style.display = 'block';
    document.getElementById('js-info').style.display = 'block';
    document.getElementById('user-agent').textContent = navigator.userAgent;
  </script>
</body>
</html>

注意事项 ​

1. noscript 中的标签限制 ​

在 <head> 中的 <noscript> 只能包含以下标签：

  • <link>
  • <meta>（使用 http-equiv 或 name）
  • <style>
html
<head>
  <noscript>
    <!-- 正确 -->
    <link rel="stylesheet" href="no-js.css">
    <meta http-equiv="refresh" content="0;url=/no-js.html">
    <style>body { background: #f5f5f5; }</style>

    <!-- 错误！head 中的 noscript 不能包含可见内容 -->
    <!-- <p>请启用 JavaScript</p> -->
  </noscript>
</head>

2. 不要在 noscript 中放置重要内容 ​

html
<!-- 不推荐：将关键信息仅放在 noscript 中 -->
<noscript>
  <p>我们提供 HTML、CSS、JavaScript 教程。</p>
</noscript>

<!-- 推荐：关键内容对所有用户可见 -->
<h1>前端学习指南</h1>
<p>我们提供 HTML、CSS、JavaScript 教程。</p>
<noscript>
  <p>启用 JavaScript 可获得更好的体验。</p>
</noscript>

3. noscript 不影响 JavaScript 的执行 ​

<noscript> 只是条件显示内容，它不会阻止 JavaScript 的执行。即使写了 <noscript>，只要 JS 启用，其中的脚本仍会正常执行。

4. 现代网站的 JS 依赖程度 ​

大多数现代网站都依赖 JavaScript，<noscript> 的实用价值在降低。但仍应提供基本的降级体验，确保禁用 JS 的用户至少能看到核心内容。

最佳实践 ​

1. 使用 .no-js / .js class 模式 ​

html
<html lang="zh-CN" class="no-js">
<head>
  <script>
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>
</head>

2. 确保核心内容不需要 JavaScript ​

html
<body>
  <!-- 核心内容：不需要 JS -->
  <h1>文章标题</h1>
  <p>文章内容...</p>

  <!-- 增强功能：需要 JS -->
  <div id="comments" class="js-only"></div>
  <noscript><p>评论功能需要 JavaScript。</p></noscript>
</body>

3. 提供明确的启用指引 ​

html
<noscript>
  <div class="notice">
    <h2>请启用 JavaScript</h2>
    <p>步骤：设置 → 隐私和安全 → 网站设置 → JavaScript → 允许</p>
  </div>
</noscript>

4. 提供纯 HTML 替代方案 ​

html
<noscript>
  <p><a href="/no-js-version.html">查看无 JavaScript 版本</a></p>
</noscript>

5. 不要过度依赖 noscript ​

现代 Web 开发中，JavaScript 已经是基本需求。只需提供基本的降级体验，无需为 JS 禁用用户构建完整的功能替代方案。

下一节

继续学习：h1-h6 标题元素

参考链接 ​