使用原生JavaScript实现URL优先级跳转：超时后依次跳转备选地址

完全可以通过纯原生JavaScript实现该需求，无需依赖任何第三方库。

核心思路 #

• 提前配置备选地址列表、单地址超时阈值两个可自定义参数，天然支持扩展任意数量的备选地址
• 按优先级顺序逐个检测地址可用性：优先采用Image对象预检测方案，避免用户直接看到站点错误页；也可选择直接跳转的简化方案
• 每个地址的等待时长达到阈值后自动触发下一个地址的检测/跳转逻辑

可直接使用的预检测版代码 #

该版本会先在后台检测地址是否可达，确认可达后再跳转，避免用户看到浏览器错误页，不受跨域限制：

// 自定义配置区，按需修改即可
const jumpConfig = {
  // 按跳转优先级填写备选地址，支持添加任意数量
  targetUrls: [
    "https://替换为你的URL1地址",
    "https://替换为你的URL2地址",
    "https://替换为你的URL3地址",
    // 可继续添加URL4到URL9甚至更多地址
  ],
  // 单个地址的等待超时时间，单位毫秒，5000即5秒
  timeout: 5000,
  // 内部计数参数，无需手动修改
  currentIndex: 0
}

function tryJumpNext() {
  // 所有备选地址都尝试完毕后自动终止
  if (jumpConfig.currentIndex >= jumpConfig.targetUrls.length) return
  const currentTarget = jumpConfig.targetUrls[jumpConfig.currentIndex]

  // 超时计时器：到点未检测到响应就尝试下一个地址
  const timeoutTimer = setTimeout(() => {
    jumpConfig.currentIndex++
    tryJumpNext()
  }, jumpConfig.timeout)

  // 用Image对象预检测地址可用性，不受跨域限制
  const testImg = new Image()
  // 只要触发加载成功/失败回调，就说明地址可达，直接跳转
  testImg.onload = testImg.onerror = () => {
    clearTimeout(timeoutTimer)
    window.location.replace(currentTarget)
  }
  // 加随机参数避免缓存影响检测结果
  testImg.src = `${new URL(currentTarget).origin}/favicon.ico?_t=${Date.now()}`
}

// 启动跳转逻辑
tryJumpNext()

使用说明 #

• 仅需修改targetUrls数组即可扩展备选地址，支持从URL1到URL9甚至更多地址的配置
• timeout参数可自定义单个地址的等待时长，按需调整即可
• 如果目标站点没有favicon，可将检测路径替换为站点下任意可访问的小体积静态资源即可
• 如果不需要预检测，接受先跳转再判断是否失败，可以使用下方简化版代码

简化版（无预检测，直接跳转） #

逻辑更简洁，无需处理静态资源检测问题，缺点是地址不可达时用户会先看到浏览器错误页：

// 按需填写备选地址和超时时间即可
const targetUrls = ["URL1", "URL2", "URL3"]
const timeout = 5000
let currentIndex = 0

function jump() {
  if (currentIndex >= targetUrls.length) return
  window.location.replace(targetUrls[currentIndex])
  // 超时未跳转就尝试下一个地址
  setTimeout(() => {
    currentIndex++
    jump()
  }, timeout)
}

jump()

内容的提问来源于stack exchange，提问作者Stackoverflow