HTML页面中link标签加载失败后自动尝试备用域名的JS脚本-html教程-PHP中文网

link标签加载失败时无法可靠监听onerror，应通过addeventlistener绑定load/error事件并配合5秒超时判断失败，再修改href触发重试，需加时间戳防缓存。

html页面中link标签加载失败后自动尝试备用域名的js脚本

link 标签加载失败时如何监听并触发重试

link 标签本身不支持 onerror 事件（多数浏览器会忽略），也不能像 img 或 script 那样直接绑定错误回调。必须用其他方式间接检测是否加载失败——最可靠的是在 load 和 error 事件都未触发的超时后，认为加载失败。

不能依赖 link.onload 或 link.onerror 属性赋值（无效）
需用 addEventListener('load', ...) + addEventListener('error', ...) 组合监听
必须设置合理超时（如 5s），防止网络卡顿导致误判
监听对象是 link 元素本身，不是其 href 对应的 CSS 文件资源

如何替换 href 并重新加载 CSS

原生 link 元素修改 href 后，浏览器会自动发起新请求并应用新样式，但旧样式不会自动清除（可能残留冲突）。关键点在于：替换前要确保旧请求已终止或可被覆盖，且新 URL 必须带时间戳或随机参数防缓存（尤其在备用域名内容可能滞后时）。

修改 link.href 即可触发重载，无需 remove() 再 append()
推荐追加 ?t=Date.now() 或 &v=Math.random() 防止 304 缓存
若备用域名路径结构不同（如从 /css/main.css 变为 /assets/main.css），需提前约定好映射规则
注意同源策略：备用域名若跨域，CSS 仍可加载，但无法通过 JS 读取其内容（不影响样式应用）

完整可运行的重试逻辑示例

以下脚本适用于页面中所有带 data-fallback 属性的 link[rel="stylesheet"]：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

function loadWithFallback(linkEl) {
  const originalHref = linkEl.href;
  const fallbackHref = linkEl.dataset.fallback;
  if (!fallbackHref) return;

  let loaded = false;
  const timeoutId = setTimeout(() => {
    if (!loaded) {
      console.warn('CSS load timeout, trying fallback:', fallbackHref);
      linkEl.href = fallbackHref + (fallbackHref.includes('?') ? '&' : '?') + 't=' + Date.now();
    }
  }, 5000);

  linkEl.addEventListener('load', () => {
    loaded = true;
    clearTimeout(timeoutId);
  });
  linkEl.addEventListener('error', () => {
    loaded = true;
    clearTimeout(timeoutId);
    console.error('CSS load failed, switching to fallback');
    linkEl.href = fallbackHref + (fallbackHref.includes('?') ? '&' : '?') + 't=' + Date.now();
  });
}

document.querySelectorAll('link[rel="stylesheet"][data-fallback]').forEach(loadWithFallback);

使用方式：<link rel="stylesheet" href="https://cdn-a.example.com/css/app.css" data-fallback="https://cdn-b.example.com/css/app.css">