当<a>标签链接的文档不存在时，如何重定向至备用页面？

首先明确：纯HTML没有原生支持这种机制，<a>标签不像<img>有onerror专属事件来检测加载失败，也无法直接指定多个跳转地址。下面分两种方向给出可行方案：

一、后端配置方案（无需前端代码，推荐） #

如果你的网站服务器由自己控制，比如用Nginx，可以通过配置让服务器自动处理失效链接，这是最可靠的方式：

# 针对单个文件配置
location = /TestFile.html {
  try_files $uri /TestFile2.html;
}

# 或者针对目录下所有文件，统一指定备用页
location / {
  try_files $uri $uri/ /备用页面路径.html;
}

当用户访问TestFile.html不存在时，服务器会直接返回TestFile2.html的内容，前端完全感知不到跳转过程。

二、前端JavaScript方案 #

如果无法修改服务器配置，只能用JS实现，有两种常用方式：

1. 点击链接时实时检测 #

点击链接后先验证主链接是否有效，失效则跳转到备用地址：

<a href="TestFile.html" onclick="return checkAndRedirect(this)">Link</a>

<script>
function checkAndRedirect(link) {
  const xhr = new XMLHttpRequest();
  // 发送HEAD请求只获取状态码，比GET更轻量
  xhr.open('HEAD', link.href, false);
  try {
    xhr.send();
    // 状态码400及以上视为链接失效
    if (xhr.status >= 400) {
      window.location.href = 'TestFile2.html';
      return false; // 阻止原链接跳转
    }
  } catch (err) {
    // 请求失败（比如跨域、网络问题），直接跳备用
    window.location.href = 'TestFile2.html';
    return false;
  }
  return true; // 原链接有效，正常跳转
}
</script>

注意：同步请求（false参数）可能会短暂阻塞页面，若想避免可以改用异步版本：

<a href="TestFile.html" onclick="handleClick(this); return false;">Link</a>

<script>
function handleClick(link) {
  const xhr = new XMLHttpRequest();
  xhr.open('HEAD', link.href, true);
  xhr.onload = () => {
    xhr.status >= 400 
      ? window.location.href = 'TestFile2.html' 
      : window.location.href = link.href;
  };
  xhr.onerror = () => {
    window.location.href = 'TestFile2.html';
  };
  xhr.send();
}
</script>

2. 页面加载时预检测替换 #

页面加载完成后自动检测所有需要备用的链接，提前把失效链接的href替换成备用地址：

<a href="TestFile.html" data-fallback="TestFile2.html" class="fallback-link">Link</a>

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.fallback-link').forEach(link => {
    const xhr = new XMLHttpRequest();
    xhr.open('HEAD', link.href, true);
    xhr.onload = () => {
      if (xhr.status >= 400) {
        link.href = link.dataset.fallback;
      }
    };
    xhr.onerror = () => {
      link.href = link.dataset.fallback;
    };
    xhr.send();
  });
});
</script>

这种方式用户点击时直接跳转备用链接，体验更流畅，但如果主链接是跨域地址，会受浏览器CORS限制导致检测失败，此时会直接替换为备用地址。

内容的提问来源于stack exchange，提问作者Alexander Smith-Richard