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?
Antworten:
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.
quelle
CSSStyleSheet
js Objekte , die von bootstrapcdn.com kommen alle haben leerrules
undcssRules
Felder in meinem Browser (Chrome 31). UPD : Es könnte tatsächlich ein domänenübergreifendes Problem sein. Die CSS-Datei in der Antwort funktioniert auch bei mir nicht.onerror
event. stackoverflow.com/questions/30546795/….rules
/.cssRules
für externe Stylesheets nicht aufzählen . jsfiddle.net/E6yYN/13Ich 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.
2) Fügen Sie das entsprechende div in Ihr HTML ein:
3) Überprüfen Sie bei bereitem Dokument, ob
#foo
es 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.
quelle
Angenommen, Sie verwenden dasselbe CDN für CSS und jQuery, warum nicht einfach einen Test durchführen und alles abfangen?
quelle
document.write("<script type='text/javascript' src='path/to/file.js'>")
.<script>
einer JS-Zeichenfolge und einer außerhalb unterscheiden. Dies ist häufig der Grund, warum Sie dies auch<\/script>
beim Schreiben von Tags für CDN-Fallbacks sehen.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.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
quelle
Möglicherweise können Sie die Existenz des Stylesheets in testen
document.styleSheets
.Testen Sie, ob die CSS-Datei, die Sie verwenden, spezifisch ist.
quelle
Man könnte dafür verwenden
onerror
: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.
quelle
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/
.
quelle
document.styleSheets[i].ownerNode.dataset
Sie auf<link data-* />
Attribute zugreifenMö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
quelle
Schauen Sie sich diese Funktionen an:
Und hier ist Vanille JavaScript-Version:
Nun die eigentliche Funktion:
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
Laden Sie mit dynamisch erstellten
oder
quelle
Ich würde wahrscheinlich so etwas wie yepnope.js verwenden
Aus der Readme-Datei entnommen .
quelle
quelle