So greifen Sie auf lokales Stylesheet (nicht Skript) zurück, wenn CDN fehlschlägt
Lesezeit: 8 Minuten
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:
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
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.
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
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.
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?
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
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.
<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
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.
(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
.
7840600cookie-checkSo greifen Sie auf lokales Stylesheet (nicht Skript) zurück, wenn CDN fehlschlägtyes
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