如何实现带超时机制的HTML重定向（目标站点不可用时跳转至备用站点）

阿华AIGC实验室

2026-4-22

嘿，这个问题我之前踩过坑！直接用两个<meta>标签确实行不通——因为浏览器会严格按照标签里的时间执行跳转，不管第一个目标站点能不能正常访问，第二个<meta>都会准时在1秒后触发跳转，完全做不到「只有主站不可用时才跳备用站」的逻辑。

要实现这种带超时检测的重定向，得靠JavaScript来帮忙，核心思路是先尝试验证主站的可达性，同时设置超时定时器，超时或验证失败就跳备用站。下面给你一个实用的实现方案：

具体代码示例

<script>
// 配置参数：可根据需求调整
const timeoutMs = 1000; // 超时时间，单位毫秒（这里是1秒）
const mainSiteUrl = 'https://buggy.example.com';
const fallbackSiteUrl = 'https://stable.example.com';

// 标记是否已经完成跳转，避免重复操作
let hasRedirected = false;

// 1. 设置超时定时器：到点没成功连接主站就跳备用站
const timeoutTimer = setTimeout(() => {
  if (!hasRedirected) {
    hasRedirected = true;
    window.location.href = fallbackSiteUrl;
  }
}, timeoutMs);

// 2. 尝试检测主站是否可达（用HEAD请求更轻量）
fetch(mainSiteUrl, { method: 'HEAD' })
  .then(response => {
    // 如果主站响应正常，就取消定时器，跳主站
    if (!hasRedirected && response.ok) {
      hasRedirected = true;
      clearTimeout(timeoutTimer);
      window.location.href = mainSiteUrl;
    }
  })
  .catch(() => {
    // 如果请求失败（主站宕机/网络问题），直接跳备用站
    if (!hasRedirected) {
      hasRedirected = true;
      clearTimeout(timeoutTimer);
      window.location.href = fallbackSiteUrl;
    }
  });
</script>

<!-- 降级方案：针对禁用JavaScript的用户 -->
<noscript>
  <meta http-equiv="Refresh" content="0; url='https://buggy.example.com'" />
</noscript>

代码逻辑说明

先设置一个1秒的超时定时器，到点后自动触发备用站跳转；
用fetch发送HEAD请求（比GET请求更轻量，只获取响应头不下载内容）去检测主站是否能正常响应；
如果主站在超时前成功响应，就立即清除定时器，跳转到主站；
如果请求失败（比如主站宕机、网络不通），也会立即清除定时器，直接跳备用站；
用hasRedirected变量防止重复跳转，避免出现同时触发两次跳转的问题。

补充说明

如果主站服务器拦截HEAD请求，可以换成请求主站的小资源（比如网站图标/favicon.ico），用Image对象加载来检测：

const img = new Image();
img.onload = () => { /* 跳主站逻辑 */ };
img.onerror = () => { /* 跳备用站逻辑 */ };
img.src = `${mainSiteUrl}/favicon.ico?${Date.now()}`; // 加时间戳避免缓存