Come eseguire il fallback nel foglio di stile locale (non nello script) se la CDN fallisce

Sto collegando al foglio di stile jQuery Mobile su un CDN e vorrei tornare alla mia versione locale del foglio di stile se il CDN fallisce. Per gli script la soluzione è ben nota:

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

Vorrei fare qualcosa di simile per un foglio di stile:

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

Non sono sicuro se un approccio simile possa essere ottenuto perché non sono sicuro che il browser si blocchi nello stesso modo quando collega uno script come fa quando carica uno script (forse è possibile caricare un foglio di stile in un tag di script e poi iniettarlo nella pagina)?

Quindi la mia domanda è: come posso assicurarmi che un foglio di stile venga caricato localmente se un CDN non funziona?

Non testato su più browser, ma penso che funzionerà. Dovrà essere dopo aver caricato jquery, o dovrai riscriverlo in semplice 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>

Immagino che la domanda sia rilevare se un foglio di stile è caricato o meno. Un possibile approccio è il seguente:

1) Aggiungi una regola speciale alla fine del tuo file CSS, come:

#foo { display: none !important; }

2) Aggiungi il div corrispondente nel tuo HTML:

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

3) Quando il documento è pronto, controlla se #fooè visibile o meno. Se il foglio di stile è stato caricato, non sarà visibile.

Demo qui : carica il tema di levigatezza jquery-ui; nessuna regola viene aggiunta al foglio di stile.

Supponendo che tu stia utilizzando lo stesso CDN per css e jQuery, perché non fare un solo test e catturarlo tutto ??

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

questo articolo suggerisce alcune soluzioni per il bootstrap css http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/

in alternativa funziona per 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>

Si potrebbe essere in grado di verificare l'esistenza del foglio di stile in 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

Prova qualcosa di specifico per il file CSS che stai utilizzando.

Si potrebbe usare onerrorper quello:

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

Lo scopo this.onerror=null;è evitare cicli infiniti nel caso in cui il fallback stesso non sia disponibile. Ma potrebbe anche essere utilizzato per avere più fallback.

Tuttavia, attualmente funziona solo in Firefox e Chrome.

Ecco un'estensione alla risposta di Katy Lavallee. Ho avvolto tutto nella sintassi della funzione autoeseguibile per evitare collisioni tra variabili. Ho anche reso lo script non specifico per un singolo collegamento. IE, ora qualsiasi collegamento al foglio di stile con un attributo URL "data-fallback" verrà automaticamente analizzato. Non è necessario codificare gli URL in questo script come prima. Nota che questo dovrebbe essere eseguito alla fine <head>dell'elemento piuttosto che alla fine <body>dell'elemento, altrimenti potrebbe causare 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);

Vuoi davvero seguire questo percorso javascript per caricare CSS nel caso in cui un CDN fallisca?

Non ho pensato a tutte le implicazioni sulle prestazioni, ma perderai il controllo di quando il CSS viene caricato e in generale per le prestazioni di caricamento della pagina, CSS è la prima cosa che vuoi scaricare dopo l'HTML.

Perché non gestirlo a livello di infrastruttura: mappare il proprio nome di dominio sul CDN, dargli un breve TTL, monitorare i file sul CDN (ad esempio utilizzando Watchmouse o qualcos'altro), se CDN fallisce, cambiare il DNS al sito di backup.

Altre opzioni che potrebbero aiutare sono "cache per sempre" su contenuto statico, ma non c'è alcuna garanzia che il browser le manterrà ovviamente o che utilizzerà la cache dell'app.

In realtà, come qualcuno ha detto in alto, se il tuo CDN non è affidabile, procuratene uno nuovo

Andy

Guarda queste funzioni:

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

Ed ecco la versione JavaScript vanilla:

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

Ora la funzione effettiva:

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

Assicurati solo che AddLocalCss sia chiamato nella testa.

Potresti anche considerare di utilizzare uno dei seguenti modi spiegati in questa risposta :

Carica usando AJAX

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

Carica utilizzando creato dinamicamente

$('<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");

o

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

Probabilmente userò qualcosa come 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');
    }
  }
}]);

Tratto dal file 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>