在前端页面开发中，CSS文件是控制页面样式呈现的核心资源，当主CSS文件因为CDN故障、路径错误或者网络异常等原因加载失败时，页面会失去样式控制，出现布局错乱、内容难以阅读的问题。利用link标签的onerror属性，我们可以在CSS加载失败时自动触发备用样式表的加载逻辑，实现条件样式表的动态切换，保障页面的基础样式可用性。
实现原理
HTML中的<link>标签用于引入外部CSS文件，当该标签对应的CSS资源加载失败时，会触发onerror事件。我们可以给<link>标签绑定onerror事件处理函数，在函数内部动态创建新的<link>标签，将备用CSS文件的路径赋值给新标签的href属性，再把新标签插入到文档头部，从而实现备用样式表的加载替换。
基础实现代码
下面是直接在HTML中绑定onerror事件的实现方式，适合简单的页面场景：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态加载备用CSS示例</title>
<!-- 主CSS文件，故意写错误路径模拟加载失败 -->
<link rel="stylesheet" href="wrong_main.css" onerror="loadFallbackCss()">
</head>
<body>
<div class="content">这是测试内容</div>
<script>
// 备用CSS加载函数
function loadFallbackCss() {
// 创建新的link标签
var fallbackLink = document.createElement('link');
fallbackLink.rel = 'stylesheet';
// 备用CSS路径，这里使用本地路径示例
fallbackLink.href = 'fallback.css';
// 将新标签插入到head中
document.head.appendChild(fallbackLink);
console.log('主CSS加载失败，已切换备用样式表');
}
</script>
</body>
</html>
通用封装方案
如果页面中有多个CSS文件需要配置备用加载逻辑，我们可以封装一个通用的函数，减少重复代码：
/**
* 动态加载CSS并配置备用方案
* @param {string} mainUrl 主CSS文件路径
* @param {string} fallbackUrl 备用CSS文件路径
*/
function loadCssWithFallback(mainUrl, fallbackUrl) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = mainUrl;
// 绑定onerror事件
link.onerror = function() {
console.log('主CSS ' + mainUrl + ' 加载失败，切换备用CSS ' + fallbackUrl);
var fallbackLink = document.createElement('link');
fallbackLink.rel = 'stylesheet';
fallbackLink.href = fallbackUrl;
document.head.appendChild(fallbackLink);
};
document.head.appendChild(link);
}
// 调用示例
loadCssWithFallback('https://ipipp.com/main_style.css', 'https://ipipp.com/fallback_style.css');
注意事项
- onerror事件只会在资源加载失败时触发，如果主CSS加载成功则不会执行备用逻辑，不会造成额外的资源浪费。
- 备用CSS的路径需要提前确认可用性，避免备用文件也加载失败导致二次触发onerror的问题。
- 如果页面中同时存在多个需要备用加载的CSS文件，建议给每个link标签单独绑定onerror逻辑，避免互相影响。
- 部分老旧浏览器对link标签的onerror属性支持可能存在差异，实际使用前可以根据需求做兼容性测试。
适用场景
这种方案非常适合依赖第三方CDN加载CSS的场景，比如使用公共CDN引入框架样式、组件库样式时，当CDN节点出现故障时可以自动切换到自己服务器托管的备用样式，保障页面基础样式不丢失。也可以用于多环境部署时，不同环境的CSS路径不一致的场景，通过判断加载状态动态切换对应环境的样式文件。