So greifen Sie auf lokales Stylesheet (nicht Skript) zurück, wenn CDN fehlschlägt

Lesezeit: 8 Minuten

So greifen Sie auf lokales Stylesheet nicht Skript zuruck wenn
sn

Ich verlinke das jQuery Mobile Stylesheet auf einem CDN 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 mir nicht sicher, ob ein ähnlicher Ansatz erreicht werden kann, da ich nicht sicher bin, ob der Browser beim Verlinken eines Skripts genauso blockiert wie beim Laden eines Skripts (vielleicht ist es möglich, ein Stylesheet in einem Skript-Tag zu laden und dann injizieren Sie es in die Seite) ?

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

  • Ich würde gerne wissen, ob dies auch möglich ist … Wenn ich mich wirklich darüber ärgern würde, dass das CDN ausfällt, würde ich einfach lokales Hosting verwenden.

    – Fosko

    12. September 11 um 4:02 Uhr

  • @Stefan Kendall, ich denke, die richtige Aussage ist, dass seine Website höchstwahrscheinlich untergeht als ein CDN

    – Shawn Mclean

    12. September 11 um 23:34 Uhr

  • Beste Möglichkeit: stackoverflow.com/questions/26192897/…

    – nmit026

    13. März 17 um 20:23 Uhr


So greifen Sie auf lokales Stylesheet nicht Skript zuruck wenn
Katy Lavallee

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

<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="https://stackoverflow.com/questions/7383163/path/to/local/jquery.mobile-1.0b3.min.css" />').appendTo('head');
    }
 }
})
</script>

  • gute Lösung, ein Problem, das es nicht anspricht, ist, wenn das CDN viel zu langsam zum Laden ist … vielleicht eine Art Zeitüberschreitung?

    – GeorgeU

    22. September 11 um 15:04 Uhr

  • Für code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css, erhalte ich rules = null, obwohl es korrekt geladen wurde. Ich verwende Chrome 26 und ich denke, das liegt daran, dass das Skript domänenübergreifend ist?

    – einfachfuzz

    5. April 13 um 9:09 Uhr

  • Die Lösung funktioniert zum Beispiel nicht wirklich für alle CDNs/Stylesheets CSSStyleSheet js-Objekte, die von bootstrapcdn.com stammen, haben alle leer rules und cssRules Felder in meinem Browser (Chrome 31). UPD: Es könnte sich tatsächlich um ein domänenübergreifendes Problem handeln, die CSS-Datei in der Antwort funktioniert bei mir auch nicht.

    – Maxim Vi.

    27. Dezember 13 um 21:16 Uhr


  • Dies ist auch eine gute Lösung onerror Veranstaltung. stackoverflow.com/questions/30546795/…

    – Chemischer Programmierer

    7. August 15 um 4:21 Uhr

  • Funktioniert es für CSS, das von einer anderen Domain geladen wird? Nein, Sie können nicht aufzählen .rules/.cssRules für externe Stylesheets. jsfiddle.net/E6yYN/13

    – Salmann A

    13. Oktober 16 um 7:09 Uhr


So greifen Sie auf lokales Stylesheet nicht Skript zuruck wenn
Jan Martin Keil

Könnte man gebrauchen onerror dafür:

<link rel="stylesheet" href="cdn.css" onerror="this.onerror=null;this.href="https://stackoverflow.com/questions/7383163/local.css";" />

Der this.onerror=null; soll Endlosschleifen vermeiden, falls der Fallback selbst nicht verfügbar ist. Aber es könnte auch verwendet werden, um mehrere Fallbacks zu haben.

Dies funktioniert derzeit jedoch nur in Firefox und Chrome.

Aktualisieren: Inzwischen scheint dies zu sein von allen gängigen Browsern unterstützt.

  • GLÜCKWÜNSCHE an alle von Ihnen, die wie ich nicht glauben konnten, dass die komplizierten Schemata, die in früheren Antworten vorgeschlagen wurden, immer noch der beste Weg sein könnten, und es bis hierher geschafft haben. Dieser Half-of-a-One-Liner funktioniert perfekt. Mal sehen, wie schnell wir es an die Spitze bringen können. Oder vielleicht kann jemand mit Moderatorzugriff die alten Antworten löschen.

    – Jerry Krinock

    22. September 2020 um 23:18 Uhr

  • Wir löschen alte Antworten nicht, weil sie “nicht so elegant” sind, aber das ist trotzdem eine gute Antwort.

    – Connor Niedrig

    5. Juni 21 um 1:13 Uhr

  • Ich habe so lange gesucht. Das ist toll! Wie war das so schwer zu finden. Ich danke dir sehr!

    – Mafii

    22. Dezember 21 um 9:25 Uhr

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

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://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="http://stackoverflow.com/../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>

  • Darf ich fragen, was das Problem mit der anfänglichen Verwendung von Zeichenfolgen ohne Escapezeichen ist, z document.write("<script type='text/javascript' src='path/to/file.js'>")?

    – Jack

    22. Januar 15 um 20:38 Uhr


  • @JackTuck: Der Parser kann nicht unterscheiden <script> innerhalb einer JS-Zeichenfolge und eine außerhalb gefunden. Dies ist häufig der Grund, warum Sie auch sehen </script> beim Schreiben von Tags für CDN-Fallbacks.

    – Brad Christie

    15. März ’15 um 18:00 Uhr


  • -1 why not just do one test and catch it all? — Weil es eine Million Gründe gibt, warum einer scheitern könnte und die anderen erfolgreich sind.

    – Schwach

    30. Juni 15 um 2:48 Uhr


1644070332 585 So greifen Sie auf lokales Stylesheet nicht Skript zuruck wenn
Salmann A

Ich denke, die Frage ist zu erkennen, ob ein Stylesheet geladen ist oder nicht. Eine mögliche Vorgehensweise ist wie folgt:

1) Fügen Sie am Ende Ihrer CSS-Datei eine spezielle Regel hinzu, wie zum Beispiel:

#foo { display: none !important; }

2) Fügen Sie das entsprechende div in Ihrem HTML hinzu:

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

3) Prüfen Sie bei Dokument bereit, ob #foo sichtbar ist oder nicht. Wenn das Stylesheet geladen wurde, ist es nicht sichtbar.

Demo hier — lädt das Jquery-ui-Smoothness-Thema; Stylesheet wird keine Regel hinzugefügt.

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

  • Für diejenigen, die dies mit Font Awesome 5 verwenden möchten, sollten Sie „FontAwesome“ (in der if-Klausel) in „Font Awesome 5 Free“ ändern (wenn Sie die kostenlosen Schriftarten verwenden). Ansonsten sollte es gut funktionieren.

    – Jason Clark

    16. Mai 18 um 16:04 Uhr

1644070332 363 So greifen Sie auf lokales Stylesheet nicht Skript zuruck wenn
Stefan Kendall

Sie Macht in der Lage sein, die Existenz des Stylesheets zu 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 auf etwas Spezifisches für die von Ihnen verwendete CSS-Datei.

  • Für diejenigen, die dies mit Font Awesome 5 verwenden möchten, sollten Sie „FontAwesome“ (in der if-Klausel) in „Font Awesome 5 Free“ ändern (wenn Sie die kostenlosen Schriftarten verwenden). Ansonsten sollte es gut funktionieren.

    – Jason Clark

    16. Mai 18 um 16:04 Uhr

Hier ist eine Erweiterung der Antwort von Katy Lavallee. Ich habe alles in selbstausführende Funktionssyntax verpackt, um Variablenkollisionen zu vermeiden. Ich habe das Skript auch unspezifisch für einen einzelnen Link gemacht. IE, jetzt wird jeder Stylesheet-Link mit einem “data-fallback”-URL-Attribut automatisch geparst. Sie müssen die URLs nicht wie zuvor fest in dieses Skript codieren. Beachten Sie, dass dies am Ende von ausgeführt werden sollte <head> Element statt am Ende der <body> Element, sonst könnte es verursachen FOUC.

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

<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/7383163/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);

  • Ich mag die Kapselung, aber im Allgemeinen können Sie sheet.rules nicht auf ein domänenübergreifendes Stylesheet untersuchen. Sie können diese allgemeine Idee immer noch verwenden, müssen aber eine andere Überprüfung durchführen.

    – Johannes Vinopal

    18. September 15 um 22:13 Uhr

  • mit document.styleSheets[i].ownerNode.dataset Sie können darauf zugreifen <link data-* /> Attribute

    – Alwin Kesler

    9. Oktober 18 um 14:57 Uhr


.

784060cookie-checkSo greifen Sie auf lokales Stylesheet (nicht Skript) zurück, wenn CDN fehlschlägt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy