Zurückgreifen auf ein lokales Stylesheet (kein Skript), wenn CDN fehlschlägt

Ich verlinke auf einem CDN mit dem jQuery Mobile-Stylesheet und möchte auf meine lokale Version des Stylesheets zurückgreifen, wenn das CDN fehlschlägt. Für Skripte ist die Lösung bekannt:

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

Ich möchte etwas Ähnliches für ein Stylesheet tun:

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

Ich bin nicht sicher, ob ein ähnlicher Ansatz erreicht werden kann, da ich nicht sicher bin, ob der Browser beim Verknüpfen eines Skripts genauso blockiert wie beim Laden eines Skripts (möglicherweise ist es möglich, ein Stylesheet in ein Skript-Tag zu laden und dann in die Seite injizieren)?

Meine Frage lautet also: Wie stelle ich sicher, dass ein Stylesheet lokal geladen wird, wenn ein CDN ausfällt?

Nicht browserübergreifend getestet, aber ich denke, das wird funktionieren. Muss aber sein, nachdem Sie jquery geladen haben, oder Sie müssen es in einfachem Javascript umschreiben.

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

Ich denke, die Frage ist, ob ein Stylesheet geladen ist oder nicht. Ein möglicher Ansatz ist wie folgt:

1) Fügen Sie am Ende Ihrer CSS-Datei eine spezielle Regel hinzu, z.

#foo { display: none !important; }

2) Fügen Sie das entsprechende div in Ihr HTML ein:

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

3) Überprüfen Sie bei bereitem Dokument, ob #fooes sichtbar ist oder nicht. Wenn das Stylesheet geladen wurde, ist es nicht sichtbar.

Demo hier - lädt jquery-ui Glätte Thema; Dem Stylesheet wird keine Regel hinzugefügt.

Angenommen, Sie verwenden dasselbe CDN für CSS und jQuery, warum nicht einfach einen Test durchführen und alles abfangen?

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

Dieser Artikel schlägt einige Lösungen für das Bootstrap-CSS vor. http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/

alternativ funktioniert dies für 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>

Möglicherweise können Sie die Existenz des Stylesheets in testen 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

Testen Sie, ob die CSS-Datei, die Sie verwenden, spezifisch ist.

Man könnte dafür verwenden onerror:

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

Dies this.onerror=null;dient dazu, Endlosschleifen zu vermeiden, falls der Fallback selbst nicht verfügbar ist. Es könnte aber auch verwendet werden, um mehrere Fallbacks zu haben.

Dies funktioniert derzeit jedoch nur in Firefox und Chrome.

Hier ist eine Erweiterung der Antwort von Katy Lavallee. Ich habe alles in eine selbstausführende Funktionssyntax eingeschlossen, um variable Kollisionen zu verhindern. Ich habe das Skript auch unspezifisch für einen einzelnen Link gemacht. IE, jetzt wird jeder Stylesheet-Link mit einem URL-Attribut "Daten-Fallback" automatisch analysiert. Sie müssen die URLs nicht wie zuvor in dieses Skript fest codieren. Beachten Sie, dass dies am Ende des <head>Elements und nicht am Ende des <body>Elements ausgeführt werden sollte, da dies sonst zu FOUC führen kann .

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

Möchten Sie wirklich diesen Javascript-Weg gehen, um CSS zu laden, falls ein CDN ausfällt?

Ich habe nicht alle Auswirkungen auf die Leistung durchdacht, aber Sie verlieren die Kontrolle darüber, wann das CSS geladen wird. Im Allgemeinen ist CSS für die Leistung beim Laden von Seiten das erste, was Sie nach dem HTML-Code herunterladen möchten.

Warum nicht auf Infrastrukturebene damit umgehen? Ordnen Sie dem CDN Ihren eigenen Domainnamen zu, geben Sie ihm eine kurze TTL, überwachen Sie die Dateien auf dem CDN (z. B. mit Watchmouse oder etwas anderem). Wenn das CDN fehlschlägt, ändern Sie den DNS in eine Sicherungssite.

Andere Optionen, die helfen könnten, sind "für immer zwischenspeichern" für statische Inhalte, aber es gibt keine Garantie, dass der Browser sie natürlich behält oder den App-Cache verwendet.

In Wirklichkeit, wie jemand oben sagte, wenn Ihr CDN unzuverlässig ist, besorgen Sie sich ein neues

Andy

Schauen Sie sich diese Funktionen an:

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

Und hier ist Vanille JavaScript-Version:

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

Nun die eigentliche Funktion:

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

Stellen Sie einfach sicher, dass AddLocalCss im Kopf aufgerufen wird.

Sie können auch eine der folgenden in dieser Antwort erläuterten Methoden verwenden :

Laden Sie mit AJAX

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

Laden Sie mit dynamisch erstellten

$('<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");

oder

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

Ich würde wahrscheinlich so etwas wie yepnope.js verwenden

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');
    }
  }
}]);

Aus der Readme-Datei entnommen .

//(load your cdn lib here first)

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