JQuery เพื่อโหลดไฟล์ Javascript แบบไดนามิก

ฉันมีไฟล์จาวาสคริปต์ขนาดใหญ่มากฉันต้องการโหลดเฉพาะเมื่อผู้ใช้คลิกที่ปุ่มใดปุ่มหนึ่ง ฉันใช้ jQuery เป็นกรอบงานของฉัน มีวิธีการหรือปลั๊กอินในตัวที่จะช่วยฉันทำสิ่งนี้หรือไม่?

รายละเอียดเพิ่มเติม: ฉันมีปุ่ม "เพิ่มความคิดเห็น" ที่ควรโหลดไฟล์จาวาสคริปต์ TinyMCE (ฉันได้ต้มไฟล์ TinyMCE ทั้งหมดลงในไฟล์ JS ไฟล์เดียว) จากนั้นเรียก tinyMCE.init (... )

ฉันไม่ต้องการโหลดสิ่งนี้ในการโหลดหน้าเริ่มต้นเพราะไม่ใช่ทุกคนที่จะคลิก "เพิ่มความคิดเห็น"

ฉันเข้าใจว่าฉันทำได้:

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

แต่มีวิธีที่ดีกว่า / ห่อหุ้มหรือไม่?

ใช่ใช้getScriptแทน document.write ซึ่งจะอนุญาตให้เรียกกลับได้เมื่อโหลดไฟล์

คุณอาจต้องการตรวจสอบว่ามีการกำหนด TinyMCE หรือไม่ก่อนที่จะรวม (สำหรับการเรียก 'เพิ่มความคิดเห็น' ในภายหลัง) ดังนั้นรหัสอาจมีลักษณะดังนี้:

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

สมมติว่าคุณต้องโทรinitเพียงครั้งเดียวนั่นคือ ถ้าไม่คุณสามารถหาได้จากที่นี่ :)

ฉันรู้ว่าฉันมาสายเล็กน้อยที่นี่ (ประมาณ 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
});