JQuery जावास्क्रिप्ट फ़ाइल को गतिशील रूप से लोड करने के लिए

Question

मेरे पास एक बहुत बड़ी जावास्क्रिप्ट फ़ाइल है जो मैं केवल लोड करना चाहता हूं यदि उपयोगकर्ता किसी निश्चित बटन पर क्लिक करता है। मैं अपने ढांचे के रूप में jQuery का उपयोग कर रहा हूँ। क्या कोई अंतर्निहित विधि या प्लगइन है जो मुझे ऐसा करने में मदद करेगा?

कुछ और विवरण: मेरे पास "टिप्पणी जोड़ें" बटन है जो TinyMCE जावास्क्रिप्ट फ़ाइल को लोड करना चाहिए (मैंने सभी TinyMCE सामान को एक जेएस फ़ाइल में उबाला है), फिर tinyMCE.init (...)।

मैं इसे प्रारंभिक पृष्ठ लोड पर लोड नहीं करना चाहता क्योंकि हर कोई "टिप्पणी जोड़ें" पर क्लिक नहीं करेगा।

मैं समझता हूँ कि मैं सिर्फ कर सकते हैं:

$("#addComment").click(function(e) { document.write("<script...") }); 

लेकिन वहाँ एक बेहतर/समझाया तरीका है?

Answer 1

हां, document.write के बजाय getScript का उपयोग करें - यह फ़ाइल लोड होने के बाद भी कॉलबैक की अनुमति देगा।

आप इसे ('टिप्पणी जोड़ें' के बाद कॉल के लिए) शामिल करने से पहले, अगर TinyMCE परिभाषित किया गया है की जाँच करने के, हालांकि चाहते हो सकता है तो कोड कुछ इस तरह दिख सकता है:

$('#add_comment').click(function() { 
    if(typeof TinyMCE == "undefined") { 
     $.getScript('tinymce.js', function() { 
      TinyMCE.init(); 
     }); 
    } 
}); 

मान लिया जाये कि आप केवल करने के लिए है एक बार, init पर कॉल करें। यदि नहीं, तो आप इसे यहाँ से पता लगा सकते हैं :)

Answer 2

मुझे पता है मैं देर से यहाँ एक छोटे से कर रहा हूँ, (5 वर्ष या तो), लेकिन मुझे लगता है कि स्वीकार किए जाते हैं एक से एक बेहतर जवाब नहीं है इस प्रकार है:

$("#addComment").click(function() { 
    if(typeof TinyMCE === "undefined") { 
     $.ajax({ 
      url: "tinymce.js", 
      dataType: "script", 
      cache: true, 
      success: function() { 
       TinyMCE.init(); 
      } 
     }); 
    } 
}); 

getScript() समारोह वास्तव में ब्राउज़र कैशिंग से बचाता है। यदि आप एक ट्रेस चलाते हैं तो आप स्क्रिप्ट एक यूआरएल जिसमें टाइमस्टैम्प पैरामीटर शामिल साथ भरी हुई है देखेंगे: एक उपयोगकर्ता #addComment लिंक कई बार, tinymce.js एक अलग ढंग से timestampped URL से फिर से लोड किया जाएगा क्लिक करता है

http://www.yoursite.com/js/tinymce.js?_=1399055841840 

हैं। यह ब्राउज़र कैशिंग के उद्देश्य को हरा देता है।

===

वैकल्पिक रूप से, getScript() दस्तावेज में वहाँ एक कुछ नमूना कोड प्रदर्शित करता है कि इस प्रकार एक कस्टम cachedScript() समारोह बनाने के द्वारा कैशिंग को सक्षम करने के लिए है:

jQuery.cachedScript = function(url, options) { 

    // Allow user to set any option except for dataType, cache, and url 
    options = $.extend(options || {}, { 
     dataType: "script", 
     cache: true, 
     url: url 
    }); 

    // Use $.ajax() since it is more flexible than $.getScript 
    // Return the jqXHR object so we can chain callbacks 
    return jQuery.ajax(options); 
}; 

// Usage 
$.cachedScript("ajax/test.js").done(function(script, textStatus) { 
    console.log(textStatus); 
}); 

===

या, यदि आप वैश्विक स्तर पर कैशिंग को अक्षम करना चाहते हैं, तो आप ajaxSetup() का उपयोग करके ऐसा कर सकते हैं:

$.ajaxSetup({ 
    cache: true 
});