如果 CDN 失败，如何回退到本地样式表（不是脚本）

Question

我正在链接到 CDN 上的 jQuery Mobile 样式表，如果 CDN 失败，我想回退到我本地版本的样式表。对于脚本，解决方案是众所周知的：

 <!-- Load jQuery and jQuery mobile with fall back to local server -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
  if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='jquery-1.6.3.min.js'%3E"));
  }
</script>

我想为样式表做类似的事情：

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />

我不确定是否可以实现类似的方法，因为我不确定浏览器在链接脚本时是否以与加载脚本时相同的方式阻塞（也许可以在脚本标记中加载样式表然后将其注入页面）？

所以我的问题是：如果 CDN 失败，如何确保在本地加载样式表？

原文由 ssn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

没有跨浏览器测试，但我认为这会起作用。必须在你加载 jquery 之后，否则你将不得不用纯 Javascript 重写它。

 <script type="text/javascript">
$.each(document.styleSheets, function(i,sheet){
  if(sheet.href=='http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css') {
    var rules = sheet.rules ? sheet.rules : sheet.cssRules;
    if (rules.length == 0) {
      $('<link rel="stylesheet" type="text/css" href="path/to/local/jquery.mobile-1.0b3.min.css" />').appendTo('head');
    }
 }
})
</script>

原文由 katy lavallee 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

可以为此使用 onerror ：

 <link rel="stylesheet" href="cdn.css" onerror="this.onerror=null;this.href='local.css';" />

this.onerror=null; 是为了避免无限循环，以防万一它自己的回退不可用。但它也可以用于多个后备。

但是，这目前仅适用于 Firefox 和 Chrome。

更新：同时，这似乎 被所有常见的浏览器支持。

原文由 Jan Martin Keil 发布，翻译遵循 CC BY-SA 4.0 许可协议