Łą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?
Odpowiedzi:
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.
źródło
CSSStyleSheet
obiekty js pochodzące z bootstrapcdn.com mają pusterules
icssRules
pola w mojej przeglądarce (Chrome 31). UPD : w rzeczywistości może to być problem między domenami, plik css w odpowiedzi również nie działa dla mnie.onerror
zdarzenia. stackoverflow.com/questions/30546795/….rules
/.cssRules
dla zewnętrznych arkuszy stylów. jsfiddle.net/E6yYN/13Chyba 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:
2) Dodaj odpowiedni element div do kodu HTML:
3) Gdy dokument jest gotowy, sprawdź, czy
#foo
jest 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.
źródło
Zakładając, że używasz tego samego CDN dla css i jQuery, dlaczego nie zrobić po prostu jednego testu i złapać wszystko?
źródło
document.write("<script type='text/javascript' src='path/to/file.js'>")
?<script>
wewnątrz ciągu JS od tego znalezionego na zewnątrz. Jest to często powód, dla którego widzisz również<\/script>
podczas pisania tagów dla awaryjnych CDN.why not just do one test and catch it all?
- Ponieważ istnieje milion powodów, dla których jeden może zawieść, a innym się udać.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
źródło
Państwo może być w stanie przetestować na istnienie w arkuszu stylów
document.styleSheets
.Sprawdź, czy nie ma czegoś konkretnego dla używanego pliku CSS.
źródło
Można
onerror
do tego użyć :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.
źródło
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/
.
źródło
document.styleSheets[i].ownerNode.dataset
tobą możesz uzyskać dostęp do<link data-* />
atrybutówCzy 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
źródło
Spójrz na te funkcje:
A oto waniliowa wersja JavaScript:
Teraz rzeczywista funkcja:
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
Załaduj za pomocą utworzonego dynamicznie
lub
źródło
Prawdopodobnie użyłbym czegoś takiego jak yepnope.js
Zaczerpnięte z pliku readme.
źródło
źródło