如果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失败,如何确保本地加载样式表？

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>

Answer 2

一个可以onerror用于：

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

这this.onerror=null;是为了避免无限循环，以防万一回退本身不可用。但它也可以用于有多个回退。

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

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

Answer 3

假设您正在为css和jQuery使用相同的CDN,为什么不只是做一个测试并抓住它？

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        document.write(unescape('%3Clink rel="stylesheet" type="text/css" href="../../Content/jquery-ui-1.8.16.custom.css" /%3E'));
        document.write(unescape('%3Cscript type="text/javascript" src="/jQuery/jquery-1.6.4.min.js" %3E%3C/script%3E'));
        document.write(unescape('%3Cscript type="text/javascript" src="/jQuery/jquery-ui-1.8.16.custom.min.js" %3E%3C/script%3E'));
    }
</script>

Answer 4

我想问题是检测是否加载了样式表.一种可能的方法如下:

1)在CSS文件的末尾添加一个特殊规则,例如:

#foo { display: none !important; }

2)在HTML中添加相应的div:

<div id="foo"></div>

3)在准备好文档时,检查是否#foo可见.如果加载了样式表,则它将不可见.

在这里演示 - 加载jquery-ui平滑主题; 没有规则添加到样式表.

Answer 5

本文为bootstrap css提供了一些解决方案 http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/

或者这适用于fontawesome

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
    (function($){
        var $span = $('<span class="fa" style="display:none"></span>').appendTo('body');
        if ($span.css('fontFamily') !== 'FontAwesome' ) {
            // Fallback Link
            $('head').append('<link href="/css/font-awesome.min.css" rel="stylesheet">');
        }
        $span.remove();
    })(jQuery);
</script>

Answer 6

您也许能够测试document.styleSheets.

var rules = [];
if (document.styleSheets[1].cssRules)
    rules = document.styleSheets[i].cssRules
else if (document.styleSheets[i].rules)
    rule= document.styleSheets[i].rules

测试特定于您正在使用的 CSS 文件的内容。