Jak wrócić do lokalnego arkusza stylów (nie skryptu), jeśli CDN zawiedzie

Łączę się z arkuszem stylów jQuery Mobile w sieci CDN i chciałbym wrócić do mojej lokalnej wersji arkusza stylów, jeśli CDN zawiedzie. W przypadku skryptów rozwiązanie jest dobrze znane:

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

Chciałbym zrobić coś podobnego dla arkusza stylów:

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

Nie jestem pewien, czy można osiągnąć podobne podejście, ponieważ nie jestem pewien, czy przeglądarka blokuje się w ten sam sposób podczas łączenia skryptu, jak to robi podczas ładowania skryptu (być może można załadować arkusz stylów w tagu skryptu, a następnie wstrzyknąć go na stronę)?

Więc moje pytanie brzmi: jak upewnić się, że arkusz stylów jest ładowany lokalnie, jeśli CDN zawiedzie?

Nie testowane na różnych przeglądarkach, ale myślę, że to zadziała. Będzie to jednak musiało nastąpić po załadowaniu jquery, albo będziesz musiał przepisać go w zwykłym języku 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>

Chyba chodzi o to, aby wykryć, czy arkusz stylów jest załadowany, czy nie. Jedno możliwe podejście jest następujące:

1) Dodaj specjalną regułę na końcu pliku CSS, na przykład:

#foo { display: none !important; }

2) Dodaj odpowiedni element div do kodu HTML:

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

3) Gdy dokument jest gotowy, sprawdź, czy #foojest widoczny, czy nie. Jeśli arkusz stylów został załadowany, nie będzie widoczny.

Demo tutaj - ładuje motyw płynności jquery-ui; żadna reguła nie jest dodawana do arkusza stylów.

Zakładając, że używasz tego samego CDN dla css i jQuery, dlaczego nie zrobić po prostu jednego testu i złapać wszystko?

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

ten artykuł sugeruje kilka rozwiązań dla bootstrap css http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/

alternatywnie działa to w przypadku 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="https://stackoverflow.com/css/font-awesome.min.css" rel="stylesheet">');
        }
        $span.remove();
    })(jQuery);
</script>

Państwo może być w stanie przetestować na istnienie w arkuszu stylów 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

Sprawdź, czy nie ma czegoś konkretnego dla używanego pliku CSS.

Można onerrordo tego użyć :

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

Ma this.onerror=null;to na celu uniknięcie niekończących się pętli w przypadku, gdy samo rozwiązanie awaryjne nie jest dostępne. Ale może być również używany do wielu awaryjnych.

Jednak obecnie działa to tylko w przeglądarkach Firefox i Chrome.

Oto rozszerzenie odpowiedzi Katy Lavallee. Wszystko zawinęłam w samowykonującą się składnię funkcji, aby zapobiec kolizji zmiennych. Skrypt nie jest też specyficzny dla pojedynczego linku. IE, teraz każde łącze do arkusza stylów z atrybutem adresu URL „data-fallback” zostanie automatycznie przeanalizowane. Nie musisz na stałe kodować adresów URL w tym skrypcie, jak wcześniej. Zauważ, że powinno to być uruchamiane na końcu <head>elementu, a nie na końcu <body>elementu, w przeciwnym razie może to spowodować FOUC .

http://jsfiddle.net/skibulk/jnfgyrLt/

<link rel="stylesheet" type="text/css" href="broken-link.css" data-fallback="broken-link2.css">

.

(function($){
    var links = {};

    $( "link[data-fallback]" ).each( function( index, link ) {
        links[link.href] = link;
    });

    $.each( document.styleSheets, function(index, sheet) {
        if(links[sheet.href]) {
            var rules = sheet.rules ? sheet.rules : sheet.cssRules;
            if (rules.length == 0) {
                link = $(links[sheet.href]);
                link.attr( 'href', link.attr("data-fallback") );
            }
        }
    });
})(jQuery);

Czy na pewno chcesz skorzystać z tej trasy javascript, aby załadować CSS na wypadek awarii CDN?

Nie przemyślałem wszystkich implikacji dotyczących wydajności, ale stracisz kontrolę nad ładowaniem CSS i ogólnie biorąc pod uwagę wydajność ładowania strony, CSS jest pierwszą rzeczą, którą chcesz pobrać po HTML.

Dlaczego nie załatwić tego na poziomie infrastruktury - zmapuj własną nazwę domeny na CDN, nadaj jej krótki TTL, monitoruj pliki w CDN (np. Za pomocą Watchmouse lub czegoś innego), jeśli CDN zawiedzie, zmień DNS na kopię zapasową.

Inne opcje, które mogą pomóc, to „pamięć podręczna na zawsze” w statycznej zawartości, ale nie ma gwarancji, że przeglądarka będzie je oczywiście zachowywać lub używać pamięci podręcznej aplikacji.

W rzeczywistości, jak ktoś powiedział na górze, jeśli twój CDN jest zawodny, zdobądź nowy

Andy

Spójrz na te funkcje:

$.ajax({
    url:'CSS URL HERE',
    type:'HEAD',
    error: function()
    {
        AddLocalCss();
    },
    success: function()
    {
        //file exists
    }
});

A oto waniliowa wersja JavaScript:

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}
if (!UrlExists('CSS URL HERE') {
AddLocalCss();
}

Teraz rzeczywista funkcja:

function AddLocalCss(){
document.write('<link rel="stylesheet" type="text/css" href=" LOCAL CSS URL HERE">')
}

Po prostu upewnij się, że w głowie wywoływana jest AddLocalCss.

Możesz również rozważyć użycie jednego z następujących sposobów wyjaśnionych w tej odpowiedzi :

Załaduj za pomocą AJAX

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});

Załaduj za pomocą utworzonego dynamicznie

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
   .appendTo("head");
Load using dynamically-created <style>

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

lub

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");

Prawdopodobnie użyłbym czegoś takiego jak yepnope.js

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}]);

Zaczerpnięte z pliku readme.

//(load your cdn lib here first)

<script>window.jQuery || document.write("<script src='//me.com/path/jquery-1.x.min.js'>\x3C/script>")</script>