Comment revenir à la feuille de style locale (pas au script) en cas d'échec du CDN

Je crée un lien vers la feuille de style jQuery Mobile sur un CDN et j'aimerais revenir à ma version locale de la feuille de style si le CDN échoue. 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 qu'une approche similaire puisse être réalisée car je ne suis pas sûr que le navigateur se bloque de la même manière lors de la liaison d'un script que lors du chargement d'un script (il est peut-être possible de charger une feuille de style dans une balise de script, puis l'injecter dans la page)?

Ma question est donc la suivante: comment m'assurer qu'une feuille de style est chargée localement en cas d'échec d'un CDN?

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

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

Je suppose que la question est de détecter si une feuille de style est chargée ou non. Une approche possible est la suivante:

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

#foo { display: none !important; }

2) Ajoutez le div correspondant dans votre HTML:

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

3) Sur le document prêt, vérifiez s'il #fooest visible ou non. Si la feuille de style a été chargée, elle ne sera pas visible.

Démo ici - charge le thème de douceur jquery-ui; aucune règle n'est ajoutée à la feuille de style.

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

<link href="//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>

cet article suggère quelques solutions pour le bootstrap css http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/

sinon cela fonctionne pour fontawesome

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

Vous pourrez peut- être tester 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.

On pourrait utiliser onerrorpour cela:

<link rel="stylesheet" href="cdn.css" onerror="this.onerror=null;this.href='local.css';" />

Le but this.onerror=null;est d'éviter les boucles sans fin au cas où le repli lui-même ne serait pas disponible. Mais il pourrait également être utilisé pour avoir plusieurs solutions de secours.

Cependant, cela ne fonctionne actuellement que dans Firefox et Chrome.

Voici une extension de la réponse de Katy Lavallee. J'ai tout enveloppé dans une syntaxe de fonction auto-exécutable pour éviter les collisions de variables. J'ai également rendu le script non spécifique à un seul lien. IE, maintenant tout lien de feuille de style avec un attribut URL "data-fallback" sera automatiquement analysé. Vous n'avez pas à coder en dur les URL dans ce script comme auparavant. Notez que cela devrait être exécuté à la fin de l' <head>élément plutôt qu'à la fin de l' <body>élément, sinon cela pourrait provoquer un FOUC .

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

<link rel="stylesheet" type="text/css" href="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);

Voulez-vous vraiment emprunter cette route javascript pour charger du CSS en cas d'échec d'un CDN?

Je n'ai pas pensé à toutes les implications sur les performances, mais vous allez perdre le contrôle du chargement du CSS et en général pour les performances de chargement de la page, CSS est la première chose que vous voulez télécharger après le HTML.

Pourquoi ne pas gérer cela au niveau de l'infrastructure - mappez votre propre nom de domaine sur le CDN, donnez-lui un court TTL, surveillez les fichiers sur le CDN (par exemple en utilisant Watchmouse ou autre chose), si le CDN échoue, changez le DNS en site de sauvegarde.

D'autres options qui pourraient aider sont le "cache pour toujours" sur le contenu statique, mais il n'y a aucune garantie que le navigateur les conservera bien sûr ou en utilisant le cache d'application.

En réalité, comme quelqu'un l'a dit en haut, si votre CDN n'est pas fiable, procurez-vous un nouveau

Andy

Regardez ces fonctions:

$.ajax({
    url:'CSS URL HERE',
    type:'HEAD',
    error: function()
    {
        AddLocalCss();
    },
    success: function()
    {
        //file exists
    }
});

Et voici la version JavaScript vanille:

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}
if (!UrlExists('CSS URL HERE') {
AddLocalCss();
}

Maintenant la fonction réelle:

function AddLocalCss(){
document.write('<link rel="stylesheet" type="text/css" href=" LOCAL CSS URL HERE">')
}

Assurez-vous simplement que AddLocalCss est appelé dans la tête.

Vous pouvez également envisager d'utiliser l'une des méthodes suivantes expliquées dans cette réponse :

Charger avec AJAX

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});

Charger à l'aide de

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
   .appendTo("head");
Load using dynamically-created <style>

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

ou

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");

J'utiliserais probablement quelque chose comme yepnope.js

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}]);

Tiré du fichier readme.

//(load your cdn lib here first)

<script>window.jQuery || document.write("<script src='//me.com/path/jquery-1.x.min.js'>\x3C/script>")</script>