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

小编典典

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

html

我正在链接到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" />

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

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

阅读 291

2020-05-10

共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>

2020-05-10