Comment se replier sur une feuille de style locale (pas un script) si le CDN échoue

Question

Je suis un lien vers jQuery Mobile de la feuille de style sur un CDN et voudrais revenir à ma version locale de la feuille de style si CA tombe en panne. Pour les scripts, la solution est bien connue:

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

Je voudrais faire quelque chose de similaire pour une feuille de style:

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

Je ne suis pas sûr si une approche similaire peut être réalisé parce que je ne suis pas sûr que le navigateur bloque de la même façon lors de la liaison d'un script comme il le fait lors du chargement d'un script (peut-être qu'il est possible de charger une feuille de style dans une balise script et puis à l'injecter dans la page) ?

Donc ma question est: Comment dois-je faire une feuille de style est chargé localement si CA tombe en panne ?

Answer 1

Pas testé sur plusieurs navigateurs, mais je pense que cela fonctionnera. Cela devra être fait après le chargement de jQuery, ou vous devrez le réécrire en Javascript simple.

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

Answer 2

En supposant que vous utilisiez le même CDN pour css et jQuery, pourquoi ne pas simplement faire un test et tout attraper?

 <link href="http://stackoverflow.com//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>
 

Answer 3

Je suppose que la question est de détecter si une feuille de style est chargé ou pas. Une approche possible est comme suit:

1) Ajouter une règle spéciale à la fin de votre fichier CSS, comme:

#foo {
    display: none !important;
}

2) Ajouter le correspondant div en HTML:

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

3) Sur le document prêt, vérifiez si #foo est visible ou non. Si la feuille de style a été chargé, il ne sera pas visible.

Démo ici -- charges de jquery-ui douceur thème.

Answer 4

Vous pourrez peut- être vérifier l’existence de la feuille de style dans 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
 

Testez quelque chose de spécifique au fichier CSS que vous utilisez.

Answer 5

Voulez-vous vraiment aller dans cette javascript route pour charger les CSS dans le cas d'un CDN échoue?

Je n'ai pas pensé à toutes les conséquences de performance à travers, mais vous allez perdre le contrôle lorsque le CSS est chargé et en général pour les performances de chargement des pages, CSS est la première chose que vous voulez télécharger après le HTML.

Pourquoi ne pas gérer cela au niveau des infrastructures - la carte de votre propre nom de domaine à la CAN, il donne une courte durée de vie, de surveiller les fichiers sur le CDN (par ex. à l'aide de Watchmouse ou autre chose), si CA échoue, modifier les DNS pour la sauvegarde du site.

D'autres options sont "cache forever" sur le contenu statique, mais il n'ya aucune garantie que le navigateur va les garder, bien sûr, ou à l'aide de l'app-cache.

En réalité, comme quelqu'un l'a dit au dessus, si votre CA n'est pas fiable en obtenir un nouveau

Andy