如何在原生JS中检测CSS文件是否引入成功？-css教程-PHP中文网

safari 不触发 link.onload 是 webkit 的主动设计，非兼容性问题；需组合 onload、onerror 与超时轮询三重检测，并用带 !important 的 opacity 等稳定属性验证样式是否生效。

如何在原生js中检测css文件是否引入成功？

不能只靠 link.onload，尤其在 Safari 中它根本不会触发——这不是兼容性问题，是 Safari 主动不实现。

为什么 `link.onload` 在 Safari 里永远不执行

Safari（包括 iOS 17 / macOS 14 及所有后续版本，截至 2026 年 8 月仍无变化）对 <link rel="stylesheet"> 元素完全不派发 load 事件。这不是 bug，是 WebKit 的明确设计选择。Chrome 93+、Firefox 65+、Edge(Chromium) 虽然支持，但仅依赖它会导致 Safari 下 Promise 永远 pending，逻辑卡死。

更关键的是：即使在 Chrome/Firefox 中，link.onload 也必须在插入 DOM 前绑定，否则缓存命中时会直接跳过事件——规范要求监听器就位早于元素加入文档树。

✅ 正确：link.onload = handler; document.head.appendChild(link);
❌ 错误：document.head.appendChild(link); link.onload = handler;
⚠️ setTimeout 延迟赋值也无法修复该竞态

`link.onerror` 为什么不能单独作为失败信号

link.onerror 只在明确错误场景下触发：404、CORS 阻止、MIME 类型错误（如返回 HTML）、CSS 语法错误。但它有严重盲区：

网络中断或请求超时 → onerror 不触发
Safari 加载失败时行为不稳定，可能触发也可能不触发
服务端返回 200 但内容为空、乱码或非 CSS → onerror 不触发，但样式实际无效

所以它既不能可靠表示“失败”，也不能反向推断“正在加载中”。

抖音下载器(Node.js)

抖音无水印视频下载和文案提取工具

下载

三重保障检测法：onload + onerror + 超时轮询

真正跨浏览器可用的方案是组合三者，缺一不可：

先绑定 link.onload 和 link.onerror（插入前）
同时启动一个 5 秒超时定时器
超时未触发任一事件，则启动轮询：用 getComputedStyle(testEl).opacity 等稳定属性检查是否生效（避免用 width 等易被覆盖的值）

示例关键逻辑：

const testEl = document.createElement('div');
testEl.id = 'css-test';
testEl.style.cssText = 'opacity:0.001!important;';
document.body.appendChild(testEl);

const checkLoaded = () => getComputedStyle(testEl).opacity === '0.001';

// 插入 link 前绑定
link.onload = () => resolve();
link.onerror = () => reject(new Error('CSS load failed'));
document.head.appendChild(link);

// 启动 5s 超时 + 轮询
const timer = setTimeout(() => {
  const interval = setInterval(() => {
    if (checkLoaded()) {
      clearInterval(interval);
      clearTimeout(timer);
      resolve();
    }
  }, 50);
}, 5000);