← Back to jQuery Course | Chapter 1: Getting Started | Lesson 5 of 6

jQuery CDN के Fallbacks

कभी-कभी एक CDN unavailable हो सकता है। एक fallback jQuery की एक local copy load कर सकता है।

In this page:

  1. Fallback क्यों इस्तेमाल करें
  2. Basic Fallback Check
  3. Script Creation के साथ Fallback
  4. Fallback को Test करना
  5. एक Local Copy रखना
Syntax
javascript 
<script src="https://cdn-url/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="local/jquery.min.js"><\/script>');
</script>

Fallback क्यों इस्तेमाल करें

अगर CDN down हो जाए या कोई network उसे block कर दे, तो jQuery पर निर्भर हर script एक साथ टूट जाता है -- एक fallback page को चाहे जो भी हो काम करते रहने देता है।

उदाहरण: Why Use a Fallback

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").text(typeof jQuery === "undefined" ? "jQuery failed to load" : "jQuery loaded");
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Basic Fallback Check

एक fallback check CDN script tag के ठीक बाद typeof jQuery === undefined test करने वाला बस एक plain JavaScript if-statement है -- अगर CDN fail हो गया, तो jQuery ने कभी वह global define ही नहीं किया, इसलिए check इसे तुरंत पकड़ लेता है।

उदाहरण: Basic Fallback Check

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Check for jQuery</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="output"></div>
  <script>
    $("#resetBtn").click(function () { $("#output").empty(); });
    $("#runBtn").click(function () {
      $("#output").text(typeof jQuery === "undefined" ? "CDN failed to load jQuery" : "jQuery loaded from the CDN - fallback not needed");
    });
  </script>
</body>
</html>

Script Creation के साथ Fallback

जब check fail होता है, तो JavaScript document.write() इस्तेमाल करके jQuery file की एक local copy की तरफ़ point करने वाला एक नया <script> tag inject कर सकता है, page की बाकी scripts चलने से पहले इसे एक backup के रूप में load करते हुए।

उदाहरण: Fallback with Script Creation

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Run the fallback check</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="output"></div>
  <script>
    $("#runBtn").click(function () {
      var loaded = typeof jQuery !== "undefined";
      $("#output").text(loaded ? "jQuery loaded from the CDN, so document.write() of the local jquery.min.js is skipped"
                               : "jQuery missing: document.write('<script src=\"jquery.min.js\"><\/script>') would load the local copy");
    });
    $("#resetBtn").click(function () { $("#output").empty(); });
  </script>
</body>
</html>

Fallback को Test करना

fallback logic के बाद एक message log करना confirm करता है कि jQuery असल में कहाँ से मिला -- fallback path को जानबूझकर test करते समय उपयोगी, उदाहरण के लिए अपने browser के dev tools में CDN को block करके।

उदाहरण: Test the Fallback

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="runBtn">Check where jQuery loaded from</button><button id="resetBtn" class="secondary">Reset</button>
  <div id="output"></div>
  <script>
    $("#resetBtn").click(function () { $("#output").empty(); });
    $("#runBtn").click(function () {
      $("#output").text(typeof jQuery === "undefined" ? "Loaded from local fallback" : "Loaded from CDN");
    });
  </script>
</body>
</html>

एक Local Copy रखना

अपने खुद के project folder के अंदर jquery.min.js की एक copy रखने का मतलब है कि आपकी site किसी third-party CDN के online बने रहने पर पूरी तरह निर्भर नहीं करती, maintain और update करने के लिए एक extra file की छोटी कीमत पर।

उदाहरण: Keep a Local Copy

javascript 
<!DOCTYPE html>
<html>
<head>
  <!-- Local fallback copy kept at: /js/jquery.min.js -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").text("CDN version: " + $.fn.jquery + "- local copy also kept as backup");
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Document Ready इवेंट · jQuery का noConflict Mode · jQuery का Syntax · किसी Webpage में jQuery जोड़ना

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. fallback check को CDN script tag से पहले रखना, इसलिए typeof jQuery === "undefined" हमेशा true होता है क्योंकि jQuery को load होने का मौका ही नहीं मिला।
  2. typeof jQuery के बजाय if (jQuery === undefined) से test करना, जो jQuery missing होने पर एक ReferenceError throw करता है।
  3. fallback को एक ऐसे local file path पर point करना जो मौजूद नहीं है, इसलिए CDN और backup दोनों fail हो जाते हैं और jQuery फिर भी undefined रहता है।
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson Document Ready Event Next Lesson → jQuery noConflict Mode

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.