HTML 页面跳转：meta refresh、JavaScript 与 301 重定向

用 meta refresh 标签跳转

在纯 HTML 中，跳转就是旧页面 <head> 中的一个 <meta http-equiv="refresh"> 标签：

<meta http-equiv="refresh" content="0; url=https://example.com/new-page">

数字是以秒为单位的延迟，后面跟一个分号，再跟 url= 和要前往的地址。0 表示页面一加载就跳转。下面是一个完整的“页面已迁移”文件。为了让这个预览停在原地，延迟设成了一小时；在真实页面上，你会用 0 或几秒钟：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="refresh" content="3600; url=https://example.com/new-page">
  <link rel="canonical" href="https://example.com/new-page">
  <title>This page has moved</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>This page has moved</h1>
  <p>Go to the <a href="https://example.com/new-page">new page</a>.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    const content = document.querySelector('meta[http-equiv="refresh"]').content;
    const [seconds, target] = content.split(';');
    document.getElementById('out').textContent =
      'The browser will go to ' + target.trim().slice(4) + ' in ' + seconds + ' seconds.';
  </script>
</body>
</html>

有两种备用措施让这个页面更稳妥：一是可见的链接（给浏览器不执行刷新的人，以及想自己决定的屏幕阅读器用户），二是 <link rel="canonical">，它告诉搜索引擎哪个 URL 才是真正的地址。如果你把这里的延迟改成 0，预览本身就会跳转到 example.com；点击“重置”即可恢复示例。

让页面自动刷新

去掉 URL，页面就会在延迟之后重新加载自己。content="5" 每 5 秒重新加载一次。下面第一个框是一个带有这个标签的小页面，你可以观察它：它的加载时间每 5 秒跳一次，你在输入框中输入的文字也会被重新加载清空。第二个框改用 JavaScript 让时钟保持最新，你输入的文字也会保留：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Auto refresh</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .pane { flex: 1; min-width: 220px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px; }
    iframe { width: 100%; height: 110px; border: 0; }
    h2 { font-size: 14px; margin: 0 0 6px; }
  </style>
</head>
<body>
  <div class="row">
    <div class="pane">
      <h2>meta refresh, content="5"</h2>
      <iframe id="refreshing" title="Page that refreshes itself"></iframe>
    </div>
    <div class="pane">
      <h2>JavaScript, setInterval</h2>
      <p>Time: <strong id="clock"></strong></p>
      <input placeholder="Type here">
    </div>
  </div>
  <script>
    document.getElementById('refreshing').srcdoc =
      '<meta http-equiv="refresh" content="5">' +
      '<body style="font-family: system-ui, sans-serif; margin: 0;">' +
      '<p>Loaded at: <strong id="t"></strong></p>' +
      '<input placeholder="Type here">' +
      '<script>t.textContent = new Date().toLocaleTimeString();<\/script>';
    const tick = () => { document.getElementById('clock').textContent = new Date().toLocaleTimeString(); };
    tick();
    setInterval(tick, 1000);
  </script>
</body>
</html>

刷新会重新加载整个页面，所以读者正在页面上做的事都会被打断。对于没人操作的页面，比如挂在墙上的状态屏，这是可以接受的。而对于仪表盘、比分和信息流，应该像第二个框那样只更新变化的部分。

用 JavaScript 跳转

当跳转取决于只有浏览器才知道的信息（用户的选择、登录状态、屏幕尺寸）时，使用 JavaScript：

// Replaces the current page in the history: Back skips it
location.replace('https://example.com/new-page');

// Adds a history entry: Back returns to this page
location.href = 'https://example.com/new-page';

做跳转时，你需要的几乎总是 location.replace。如果用 location.href，按返回键会回到发起跳转的页面，而它又会再次跳转，用户就被困住了。

优先使用服务器重定向

meta refresh 和脚本都要等浏览器下载完旧页面后才会执行。服务器重定向则在发送任何 HTML 之前，就用一个状态码和新地址来响应请求：

• 301（永久移动）或 308：页面永久搬到了新地址。搜索引擎会把旧 URL 的排名转移给新 URL。
• 302（找到）或 307：临时移动；旧 URL 仍然是主地址。

具体怎么设置取决于你的托管服务。几种常见写法：

# Apache (.htaccess)
Redirect 301 /old-page https://example.com/new-page

# nginx (inside a server block)
location = /old-page { return 301 https://example.com/new-page; }

# Netlify or Cloudflare Pages (_redirects file)
/old-page  /new-page  301

只有在完全无法修改服务器时才使用 meta refresh，比如在没有重定向规则的静态托管上。Google 把即时的 meta refresh 当作永久重定向，把有延迟的当作临时重定向，所以 0 延迟更接近 301。

定时跳转与无障碍

带延迟的跳转可能会在读者读到一半时把他带走。无障碍指南（WCAG）把定时跳转算作不合格；即时跳转则没有问题。如果一定要等待，就在页面上说明（“你将在 10 秒后被跳转”），并且始终附上链接，让人们按自己的节奏前往。

常见错误

• 跳转循环。两个页面互相刷新跳转，读者就会被永远来回弹。检查目标页面会把人送到哪里。
• 相对 URL 指向了错误的位置。url=new-page 是相对于当前 URL 解析的，所以从 /docs/old 出发会去到 /docs/new-page。拿不准时，使用 url=/new-page 这样的完整路径。
• 没有备用链接。始终在 body 中加一个指向新页面的普通链接。
• 用 location.href 做跳转。这样返回按钮会把人带进跳转循环。请使用 location.replace。
• 能控制服务器却用 meta refresh。改为配置 301；它更快，对所有工具来说也更清楚。