Cara mengembalikan ke lembar gaya lokal (bukan skrip) jika CDN gagal

Saya menautkan ke stylesheet jQuery Mobile di CDN dan ingin kembali ke stylesheet versi lokal saya jika CDN gagal. Untuk skrip, solusinya terkenal:

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

Saya ingin melakukan sesuatu yang serupa untuk style sheet:

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

Saya tidak yakin apakah pendekatan serupa dapat dicapai karena saya tidak yakin apakah browser memblokir dengan cara yang sama saat menautkan skrip seperti saat memuat skrip (mungkin mungkin untuk memuat lembar gaya di tag skrip dan kemudian masukkan ke dalam halaman)?

Jadi pertanyaan saya adalah: Bagaimana cara memastikan stylesheet dimuat secara lokal jika CDN gagal?

Tidak diuji lintas-browser tetapi saya pikir ini akan berhasil. Akan harus setelah Anda memuat jquery, atau Anda harus menulis ulang dalam Javascript biasa.

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

Saya kira pertanyaannya adalah untuk mendeteksi apakah stylesheet dimuat atau tidak. Salah satu pendekatan yang mungkin adalah sebagai berikut:

1) Tambahkan aturan khusus di akhir file CSS Anda, seperti:

#foo { display: none !important; }

2) Tambahkan div yang sesuai di HTML Anda:

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

3) Pada dokumen siap, periksa apakah #footerlihat atau tidak. Jika stylesheet dimuat, itu tidak akan terlihat.

Demo di sini - memuat tema kelancaran jquery-ui; tidak ada aturan yang ditambahkan ke stylesheet.

Dengan asumsi Anda menggunakan CDN yang sama untuk css dan jQuery, mengapa tidak melakukan satu tes saja dan menangkap semuanya ??

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

artikel ini menyarankan beberapa solusi untuk bootstrap css http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/

alternatifnya ini bekerja untuk 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>

Anda mungkin dapat menguji keberadaan stylesheet di 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

Uji sesuatu yang spesifik untuk file CSS yang Anda gunakan.

Seseorang dapat menggunakannya onerroruntuk itu:

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

Ini this.onerror=null;untuk menghindari loop tanpa akhir jika fallback itu sendiri tidak tersedia. Namun, ini juga dapat digunakan untuk memiliki beberapa fallback.

Namun, saat ini ini hanya berfungsi di Firefox dan Chrome.

Ini perpanjangan dari jawaban katy lavallee. Saya telah membungkus semuanya dalam sintaks fungsi yang dijalankan sendiri untuk mencegah tabrakan variabel. Saya juga membuat skrip tidak spesifik untuk satu tautan. IE, sekarang semua tautan lembar gaya dengan atribut url "data-fallback" akan diurai secara otomatis. Anda tidak perlu melakukan hard-code url ke dalam skrip ini seperti sebelumnya. Perhatikan bahwa ini harus dijalankan di akhir <head>elemen daripada di akhir <body>elemen, jika tidak maka dapat menyebabkan 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);

Apakah Anda benar-benar ingin menggunakan rute javascript ini untuk memuat CSS jika CDN gagal?

Saya belum memikirkan semua implikasi kinerja tetapi Anda akan kehilangan kendali ketika CSS dimuat dan secara umum untuk kinerja pemuatan halaman, CSS adalah hal pertama yang ingin Anda unduh setelah HTML.

Mengapa tidak menangani ini di tingkat infrastruktur - petakan nama domain Anda sendiri ke CDN, berikan TTL singkat, pantau file di CDN (misalnya menggunakan Watchmouse atau yang lainnya), jika CDN gagal, ubah DNS ke situs cadangan.

Opsi lain yang mungkin membantu adalah "cache forever" pada konten statis, tetapi tidak ada jaminan browser akan menyimpannya atau menggunakan app-cache.

Pada kenyataannya seperti yang dikatakan seseorang di atas, jika CDN Anda tidak dapat diandalkan, dapatkan yang baru

Andy

Lihatlah fungsi-fungsi ini:

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

Dan inilah versi 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();
}

Sekarang fungsi sebenarnya:

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

Pastikan AddLocalCss dipanggil di kepala.

Anda juga dapat mempertimbangkan untuk menggunakan salah satu cara berikut yang dijelaskan dalam jawaban ini :

Muat menggunakan AJAX

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

Muat menggunakan yang dibuat secara dinamis

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

atau

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

Saya mungkin akan menggunakan sesuatu seperti 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');
    }
  }
}]);

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