जावास्क्रिप्ट डायनामिक रूप से जावास्क्रिप्ट फ़ाइल लोड करने के लिए

Question

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

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

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

मैं समझता हूं कि मैं बस कर सकता हूं:

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

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

Comments

यह TinyMCE कंप्रेसर का एक बड़ा कांटा है, जो jQuery.tinyMCE प्लगइन के माध्यम से TinyMCE के अतुल्यकालिक लोडिंग को जोड़ता है, और इसमें Gzip, कॉन्सेटैनेशन और मिनिफिकेशन शामिल हैं: github.com/bobicvo2/tinymce_compressor/blob/master/…

— बॉब ग्रेगर

Answer 1

हां, डॉक्यूमेंट के बजाय गेटस्क्रिप्ट का उपयोग करें। राइट - यह फाइल लोड होते ही कॉलबैक के लिए भी अनुमति देगा।

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

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

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

Comments

@Jose: धन्यवाद :), @ जेफ़: कोई बात नहीं। जहाँ तक jQuery awesomeness जाता है, यह काफी अज्ञात है।

— पाओलो बेरगीनो

TLDR; अगर स्क्रिप्ट एक ही डायरेक्टरी में हो तो ही ऐसा करें। लंबा संस्करण: गेटस्क्रिप्ट वास्तव में पेज के बजाय वर्तमान स्क्रैप में जावास्क्रिप्ट को इंजेक्ट करता है। इसका मतलब यह है कि शामिल जावास्क्रिप्ट पर कोई भी पथ वर्तमान दस्तावेज़ के सापेक्ष होगा।

— टॉम करचरे

Answer 2

मुझे एहसास है कि मैं यहाँ थोड़ी देर से हूँ, (5 साल या तो), लेकिन मुझे लगता है कि इस तरह से स्वीकार किए गए एक बेहतर उत्तर है:

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

getScript()समारोह वास्तव में ब्राउज़र कैशिंग से बचाता है । यदि आप एक ट्रेस चलाते हैं, तो आप देखेंगे कि स्क्रिप्ट एक URL के साथ भरी हुई है जिसमें टाइमस्टैम्प पैरामीटर शामिल है:

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

यदि कोई उपयोगकर्ता #addCommentकई बार लिंक पर क्लिक करता है , तो tinymce.jsउसे एक अलग टाइमस्टैम्ड URL से पुनः लोड किया जाएगा। यह ब्राउज़र कैशिंग के उद्देश्य को पराजित करता है।

===

वैकल्पिक रूप से, 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
});

Comments

हो सकता है कि जब आपने इसे लिखा हो, तो यह उपलब्ध न हो, लेकिन ध्यान दें कि jQuery आपको (विश्व स्तर पर) इस नो-कैशिंग सुविधा को अक्षम करने और फिर से कैशिंग की अनुमति देता है। Api.jquery.com/jQuery.getScript/#caching-requests देखें (ओह, मुझे $ .ajax () एप्रोच है जिसे आप यहां कवर करते हैं और साथ ही उल्लेख किया गया है।)

— पीटर हैनसेन

@PeterHansen - टिप के लिए धन्यवाद। मैंने आपके सुझाव से अपना उत्तर अपडेट कर दिया।

— दाना

jQuery 1.12.0 या बाद में इस तरह एंटीकैच इनलाइन को अक्षम करने का समर्थन:$.getScript({url: "test.js",cache:true})

— oriadam