सीडीएन सर्वर नीचे होने पर बूटस्ट्रैप सीएसएस की स्थानीय प्रति लोड कैसे करें?

Question

अब तक मैं इस तरह उपयोग कर रहा हूँ जावास्क्रिप्ट

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> 
<script> $.fn.modal || document.write('<script src="js/bootstrap.min.js">\x3C/script>')</script> 

मैं bootstrapcdn से bootstrap.css लोड हो रहा हूँ की तरह के लिए इस

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 

कोई मुझे बताओ कि अगर cdn स्थानीय प्रतिलिपि लोड करने के लिए कर सकते हैं सर्वर डाउन है।?

Answer 1

इस के लिए मेरे समाधान शरीर के शीर्ष पर बूटस्ट्रैप छिपा वर्ग शैली का उपयोग एक खाली div के लिए किया गया था:

<div id="bootstrapCssTest" class="hidden"></div> 

और फिर जावास्क्रिप्ट के साथ बाद में यह परीक्षण करने और अगर सिर से संलग्न करने के लिए div दिख रहा है:

<script type="text/javascript"> 

    if ($('#bootstrapCssTest').is(':visible') === true) { 
     $('<link href="/localcopy/css/bootstrap.css" rel="stylesheet" type="text/css" />').appendTo('head'); 
    } 
</script> 

Answer 2

फ़ाइल काम पर एक jquery.Get() निष्पादित करेगा? परिणाम के आधार पर, आप जान लेंगे कि यह उपलब्ध है या नहीं। और क्लाइंटसाइड पर होने के कारण, स्थानीय कैशिंग अतिरिक्त बैंडविड्थ के लिए यह एक गैर-मुद्दा बना देगा।

Answer 3

This gist एक कोड का टुकड़ा है कि मैं एक सीएसएस वापस आने लोड करने के लिए की जरूरत का पता लगाने के लिए विशेष रूप से उपयोगी पाया है।

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" /> 

<script type="text/javascript"> 
    function cssLoaded(href) { 
     var cssFound = false; 

     for (var i = 0; i < document.styleSheets.length; i++) { 
      var sheet = document.styleSheets[i]; 
      if (sheet['href'].indexOf(href) >= 0 && sheet['cssRules'].length > 0) { 
       cssFound = true; 
      } 
     }; 

     return cssFound; 
    } 

    if (!cssLoaded('bootstrap-combined.min.css')) { 
     local_bootstrap = document.createElement('link'); 
     local_bootstrap.setAttribute("rel", "stylesheet"); 
     local_bootstrap.setAttribute("type", "text/css"); 
     local_bootstrap.setAttribute("href", "/Content/Styles/bootstrap-combined.min.css"); 
     document.getElementsByTagName("head")[0].appendChild(local_bootstrap); 
    } 
</script> 

सिर्फ अपने स्थानीय सीएसएस करने के लिए सही पथ के साथ /Content/Styles/bootstrap-combined.min.css की जगह है और आप अच्छा

Answer 4

इस प्रयास करें होना चाहिए,

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 
<script> 
    function cssLoaded(href) { 
     var cssFound = false; 
     for (var i = 0; i < document.styleSheets.length; i++) { 
      var sheet = document.styleSheets[i]; 
      if (
      sheet['href'] == "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" || 
      sheet['href'] == "https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css") { 
       cssFound = true; 
      } 
     }; 
     return cssFound; 
    } 
    if (!cssLoaded('bootstrap.min.css')) { 
     local_bootstrap = new CustomEvent('link'); 
     local_bootstrap.setAttribute("rel", "stylesheet"); 
     local_bootstrap.setAttribute("href", "/css/bootstrap.min.css"); 
     document.getElementsByTagName("head")[0].appendChild(local_bootstrap); 
    } 
</script> 

Source