getScript() से Scripts Load करना
getScript method किसी URL से एक JavaScript file load करता है और उसे चलाता है। ज़रूरत पड़ने पर extra scripts load करने के लिए यह उपयोगी है।
In this page:
Syntax
$.getScript(url, function () {
// script loaded
});getScript() क्या है?
$.getScript() AJAX के through एक URL से एक JavaScript file fetch करता है और आते ही उसे execute कर देता है, effectively एक script tag को dynamically inject और run करते हुए।
उदाहरण: What is getScript()?
<!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() {
$.getScript("https://code.jquery.com/jquery-3.7.1.min.js", function() {
$("#output").text("Script loaded and executed");
});
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>एक Success Callback इस्तेमाल करना
done callback script के successfully load और execute हो जाने के बाद चलता है, जो नई script द्वारा define किए गए किसी भी functions को call करना शुरू करने के लिए safe जगह है।
उदाहरण: Use a Success Callback
<!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() {
$.getScript("https://code.jquery.com/jquery-3.7.1.min.js").done(function() {
$("#output").text("Safe to use functions from the new script now");
});
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>Script Errors Handle करना
एक script load होने में fail हो सकती है -- एक bad URL, network error, या blocked request की वजह से -- और .fail() chain करना आपको उस case को handle करने और एक useful message दिखाने देता है।
उदाहरण: Handle Script Errors
<!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() {
$.getScript("https://example.com/missing-script-404.js").fail(function() {
$("#output").text("Script failed to load");
});
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>जब ज़रूरत हो तब एक Script Load करना
किसी script को हर page के initial load में शामिल करने के बजाय सिर्फ तभी load करना जब वह असल में ज़रूरी हो, on demand loading कहलाता है, और यह initial page को हल्का रख सकता है।
उदाहरण: Load a Script on Demand
<!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; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="btn">Load Feature</button>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
function init() {
$("#btn").on("click", function() {
$.getScript("https://code.jquery.com/jquery-3.7.1.min.js", function() {
$("#output").append($("<div>").text("Feature script loaded on demand"));
});
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>एक छोटा getScript() Project
getScript() तब उपयोगी है जब किसी particular feature के लिए सिर्फ एक extra JavaScript library या plugin चाहिए, जैसे कोई chart library जो सिर्फ एक page पर इस्तेमाल होती है।
उदाहरण: Small getScript() Project
<!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; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="loadChart">Load Chart Library</button>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
function init() {
$("#loadChart").on("click", function() {
$.getScript("https://code.jquery.com/jquery-3.7.1.min.js", function() {
$("#output").append($("<div>").text("Chart library ready"));
});
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Related Topics
{# 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. #}
आम गलतियां
- किसी script के functions को
$.getScript(...)के तुरंत बाद इस्तेमाल करना बजाय उसके.done()callback के अंदर, ताकि वे अभी define ही न हुए हों। .fail()भूल जाना, ताकि एक गलत URL या blocked request बिना किसी visible feedback के fail हो जाए।- हर click पर बार-बार same script load करना, जो इसे फिर से execute कर देता है और event handlers तथा side effects को duplicate कर सकता है।
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: