วิธีการเปลี่ยนกลับไปใช้สไตล์ชีตภายใน (ไม่ใช่สคริปต์) หาก CDN ล้มเหลว

ฉันกำลังเชื่อมโยงกับสไตล์ชีต jQuery Mobile บน CDN และต้องการกลับไปใช้สไตล์ชีทเวอร์ชันท้องถิ่นของฉันหาก CDN ล้มเหลว สำหรับสคริปต์โซลูชันเป็นที่รู้จักกันดี:

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

ฉันต้องการทำสิ่งที่คล้ายกันสำหรับสไตล์ชีต:

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

ฉันไม่แน่ใจว่าจะสามารถใช้แนวทางที่คล้ายกันได้หรือไม่เพราะฉันไม่แน่ใจว่าเบราว์เซอร์บล็อกในลักษณะเดียวกันหรือไม่เมื่อเชื่อมโยงสคริปต์เหมือนกับที่ทำเมื่อโหลดสคริปต์ (อาจเป็นไปได้ที่จะโหลดสไตล์ชีตในแท็กสคริปต์แล้ว ฉีดเข้าไปในหน้า)?

ดังนั้นคำถามของฉันคือ: ฉันจะแน่ใจได้อย่างไรว่าสไตล์ชีตถูกโหลดในเครื่องหาก CDN ล้มเหลว

ไม่ได้ทดสอบข้ามเบราว์เซอร์ แต่ฉันคิดว่ามันจะได้ผล จะต้องหลังจากที่คุณโหลด jquery แล้วหรือคุณจะต้องเขียนใหม่ใน 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>

ฉันเดาว่าคำถามคือการตรวจสอบว่ามีการโหลดสไตล์ชีตหรือไม่ แนวทางหนึ่งที่เป็นไปได้มีดังนี้:

1) เพิ่มกฎพิเศษที่ท้ายไฟล์ CSS ของคุณเช่น:

#foo { display: none !important; }

2) เพิ่ม div ที่เกี่ยวข้องใน HTML ของคุณ:

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

3) ในเอกสารพร้อมตรวจสอบว่า#fooมองเห็นได้หรือไม่ หากโหลดสไตล์ชีตแล้วจะมองไม่เห็น

สาธิตที่นี่ - โหลดธีมความเรียบ jquery-ui; ไม่มีการเพิ่มกฎในสไตล์ชีต

สมมติว่าคุณใช้ CDN เดียวกันสำหรับ css และ jQuery ทำไมไม่ทำการทดสอบเพียงครั้งเดียวและตรวจจับทั้งหมด ??

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

บทความนี้แนะนำวิธีแก้ปัญหาสำหรับ bootstrap css http://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/

หรือวิธีนี้ใช้ได้กับ 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>

คุณอาจทดสอบการมีอยู่ของสไตล์ชีตใน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

ทดสอบสิ่งที่เฉพาะเจาะจงสำหรับไฟล์ CSS ที่คุณใช้

สามารถใช้onerrorสำหรับสิ่งนั้น:

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

this.onerror=null;คือการหลีกเลี่ยงลูปไม่มีที่สิ้นสุดในกรณีที่ fallback ตัวเองไม่สามารถใช้ได้ แต่ยังสามารถใช้เพื่อให้มีทางเลือกหลายรายการ

อย่างไรก็ตามขณะนี้ใช้ได้เฉพาะใน Firefox และ Chrome เท่านั้น

นี่คือส่วนเสริมสำหรับคำตอบของ katy lavallee ฉันได้รวมทุกอย่างไว้ในไวยากรณ์ของฟังก์ชันที่ดำเนินการเองเพื่อป้องกันการชนกันของตัวแปร ฉันยังทำให้สคริปต์ไม่เฉพาะเจาะจงกับลิงก์เดียว IE ตอนนี้ลิงก์สไตล์ชีตที่มีแอตทริบิวต์ url "data-fallback" จะถูกแยกวิเคราะห์โดยอัตโนมัติ คุณไม่จำเป็นต้องฮาร์ดโค้ด URL ลงในสคริปต์นี้เหมือนเมื่อก่อน โปรดทราบว่าควรเรียกใช้ที่ส่วนท้ายของ<head>องค์ประกอบมากกว่าที่ส่วนท้ายของ<body>องค์ประกอบมิฉะนั้นอาจทำให้เกิด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);

คุณต้องการลงเส้นทางจาวาสคริปต์นี้เพื่อโหลด CSS ในกรณีที่ CDN ล้มเหลวหรือไม่?

ฉันไม่ได้คิดถึงผลกระทบด้านประสิทธิภาพทั้งหมด แต่คุณจะสูญเสียการควบคุมเมื่อโหลด CSS และโดยทั่วไปสำหรับประสิทธิภาพการโหลดหน้า CSS เป็นสิ่งแรกที่คุณต้องการดาวน์โหลดหลังจาก HTML

ทำไมไม่จัดการสิ่งนี้ในระดับโครงสร้างพื้นฐาน - แมปชื่อโดเมนของคุณเองกับ CDN ให้ TTL สั้น ๆ ตรวจสอบไฟล์บน CDN (เช่นใช้ Watchmouse หรืออย่างอื่น) หาก CDN ล้มเหลวให้เปลี่ยน DNS เป็นไซต์สำรอง

ตัวเลือกอื่น ๆ ที่อาจช่วยได้คือ "แคชตลอดไป" ในเนื้อหาคงที่ แต่ไม่มีการรับประกันว่าเบราว์เซอร์จะเก็บไว้แน่นอนหรือใช้แอปแคช

ในความเป็นจริงตามที่มีคนพูดไว้ด้านบนถ้า CDN ของคุณไม่น่าเชื่อถือให้รับอันใหม่

แอนดี้

ดูฟังก์ชั่นเหล่านี้:

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

และนี่คือเวอร์ชัน JavaScript ของวานิลลา:

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

ตอนนี้ฟังก์ชั่นจริง:

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

ตรวจสอบให้แน่ใจว่ามีการเรียก AddLocalCss ในหัว

คุณอาจลองใช้หนึ่งในวิธีต่อไปนี้ที่อธิบายไว้ในคำตอบนี้ :

โหลดโดยใช้ AJAX

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

โหลดโดยใช้ที่สร้างขึ้นแบบไดนามิก

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

หรือ

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

ฉันอาจจะใช้บางอย่างเช่น 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');
    }
  }
}]);

นำมาจาก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>