JQuery để tải tệp Javascript động

Tôi có một tệp javascript rất lớn tôi chỉ muốn tải nếu người dùng nhấp vào một nút nhất định. Tôi đang sử dụng jQuery làm khung. Có một phương pháp hoặc plugin tích hợp nào sẽ giúp tôi làm điều này không?

Một số chi tiết khác: Tôi có nút "Thêm nhận xét" sẽ tải tệp javascript TinyMCE (Tôi đã luộc tất cả các công cụ TinyMCE xuống một tệp JS), sau đó gọi tinyMCE.init (...).

Tôi không muốn tải cái này khi tải trang ban đầu vì không phải ai cũng nhấp vào "Thêm bình luận".

Tôi hiểu tôi chỉ có thể làm:

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

Nhưng có một cách tốt hơn / đóng gói?

Có, sử dụng getScript thay vì document.write - thậm chí nó sẽ cho phép gọi lại sau khi tải tệp.

Tuy nhiên, bạn có thể muốn kiểm tra xem TinyMCE có được xác định hay không, trước khi bao gồm nó (đối với các cuộc gọi tiếp theo đến 'Thêm nhận xét') để mã có thể trông giống như thế này:

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

Giả sử bạn chỉ phải gọi initnó một lần, đó là. Nếu không, bạn có thể tìm ra nó từ đây :)

Tôi nhận ra mình đến hơi muộn ở đây, (5 năm hoặc lâu hơn), nhưng tôi nghĩ có một câu trả lời tốt hơn câu trả lời như sau:

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

Các getScript()chức năng thực sự ngăn chặn bộ nhớ đệm trình duyệt . Nếu bạn chạy theo dõi, bạn sẽ thấy tập lệnh được tải với một URL bao gồm tham số dấu thời gian:

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

Nếu người dùng nhấp vào #addCommentliên kết nhiều lần, tinymce.jssẽ được tải lại từ một URL được đánh dấu thời gian khác nhau. Điều này đánh bại mục đích của bộ nhớ đệm trình duyệt.

===

Ngoài ra, trong getScript() tài liệu có một số mã mẫu trình bày cách bật bộ đệm ẩn bằng cách tạo một cachedScript()chức năng tùy chỉnh như sau:

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 );
});

===

Hoặc, nếu bạn muốn tắt bộ nhớ đệm trên toàn cầu, bạn có thể sử dụng ajaxSetup()như sau:

$.ajaxSetup({
    cache: true
});