Cách dự phòng cho biểu định kiểu cục bộ (không phải tập lệnh) nếu CDN không thành công

Tôi đang liên kết với biểu định kiểu jQuery Mobile trên CDN và muốn quay lại phiên bản định kiểu cục bộ của tôi nếu CDN không thành công. Đối với tập lệnh, giải pháp nổi tiếng là:

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

Tôi muốn làm một cái gì đó tương tự cho một style sheet:

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

Tôi không chắc liệu có thể đạt được cách tiếp cận tương tự hay không vì tôi không chắc liệu trình duyệt có chặn theo cách tương tự khi liên kết tập lệnh như khi tải tập lệnh hay không (có thể có thể tải biểu định kiểu trong thẻ tập lệnh và sau đó tiêm nó vào trang)?

Vì vậy, câu hỏi của tôi là: Làm cách nào để đảm bảo một biểu định kiểu được tải cục bộ nếu CDN bị lỗi?

Không được thử nghiệm trên nhiều trình duyệt nhưng tôi nghĩ điều này sẽ hoạt động. Tuy nhiên, sẽ phải sau khi bạn tải jquery, hoặc bạn sẽ phải viết lại nó bằng Javascript thuần túy.

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

Tôi đoán câu hỏi là để phát hiện xem một biểu định kiểu đã được tải hay chưa. Một cách tiếp cận có thể thực hiện như sau:

1) Thêm quy tắc đặc biệt vào cuối tệp CSS của bạn, như:

#foo { display: none !important; }

2) Thêm div tương ứng trong HTML của bạn:

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

3) Trên tài liệu đã sẵn sàng, hãy kiểm tra xem #foocó hiển thị hay không. Nếu biểu định kiểu đã được tải, nó sẽ không hiển thị.

Demo tại đây - tải chủ đề mượt mà jquery-ui; không có quy tắc nào được thêm vào biểu định kiểu.

Giả sử bạn đang sử dụng cùng một CDN cho css và jQuery, tại sao không chỉ làm một bài kiểm tra và bắt tất cả ??

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

bài viết này gợi ý một số giải pháp cho css bootstrap http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/

cách khác, điều này hoạt động cho phông chữ tuyệt vời

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

Bạn có thể kiểm tra sự tồn tại của biểu định kiểu trong 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

Kiểm tra một cái gì đó cụ thể cho tệp CSS bạn đang sử dụng.

Người ta có thể sử dụng onerrorcho điều đó:

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

Các this.onerror=null;là để tránh các vòng lặp vô tận trong trường hợp dự phòng tự nó là không có sẵn. Nhưng nó cũng có thể được sử dụng để có nhiều dự phòng.

Tuy nhiên, điều này hiện chỉ hoạt động trên Firefox và Chrome.

Đây là phần mở rộng cho câu trả lời của katy lavallee. Tôi đã gói mọi thứ trong cú pháp hàm tự thực thi để ngăn chặn các xung đột biến. Tôi cũng đã làm cho tập lệnh không cụ thể cho một liên kết. IE, bây giờ bất kỳ liên kết biểu định kiểu nào có thuộc tính url "data-dự phòng" sẽ tự động được phân tích cú pháp. Bạn không cần phải mã hóa cứng các url vào tập lệnh này như trước đây. Lưu ý rằng điều này nên được chạy ở cuối <head>phần tử chứ không phải ở cuối <body>phần tử, nếu không nó có thể gây ra 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);

Bạn có thực sự muốn đi xuống tuyến đường javascript này để tải CSS trong trường hợp CDN bị lỗi không?

Tôi chưa nghĩ hết tác động của hiệu suất nhưng bạn sẽ mất kiểm soát khi CSS được tải và nói chung đối với hiệu suất tải trang, CSS là thứ đầu tiên bạn muốn tải xuống sau HTML.

Tại sao không xử lý điều này ở cấp cơ sở hạ tầng - ánh xạ tên miền của riêng bạn với CDN, đặt cho nó một TTL ngắn, theo dõi các tệp trên CDN (ví dụ: sử dụng Watchmouse hoặc thứ gì đó khác), nếu CDN bị lỗi, hãy thay đổi DNS thành trang web sao lưu.

Các tùy chọn khác có thể hữu ích là "bộ nhớ cache vĩnh viễn" trên nội dung tĩnh nhưng không có gì đảm bảo rằng trình duyệt sẽ giữ chúng tất nhiên hoặc sử dụng bộ đệm ứng dụng.

Trong thực tế như ai đó đã nói ở trên, nếu CDN của bạn không đáng tin cậy, hãy lấy một cái mới

Andy

Nhìn vào các chức năng sau:

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

Và đây là phiên bản JavaScript vani:

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

Bây giờ chức năng thực tế:

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

Chỉ cần đảm bảo rằng AddLocalCss được gọi trong đầu.

Bạn cũng có thể cân nhắc sử dụng một trong những cách sau giải thích trong câu trả lời này :

Tải bằng AJAX

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

Tải bằng cách tạo động

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

hoặc là

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

Tôi có thể sẽ sử dụng một cái gì đó như 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');
    }
  }
}]);

Lấy từ 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>