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

Question

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

Một số chi tiết khác: Tôi có nút "Thêm nhận xét" cần tải tệp tin TinyMCE javascript (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 trang này khi tải trang ban đầu vì không phải ai cũng nhấp vào "Thêm nhận xét".

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

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

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

Answer 1

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

Bạn có thể muốn kiểm tra xem TinyMCE được xác định, tuy nhiên, trước khi đưa nó (cho cuộc gọi tiếp theo để 'Thêm nhận xét') để mã có thể trô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 init trên đó một lần, nghĩa là. Nếu không, bạn có thể tìm ra từ đây :)

Answer 2

Tôi nhận ra mình 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(); 
      } 
     }); 
    } 
}); 

Chức năng getScript() thực sự ngăn bộ nhớ đệm của trình duyệt. Nếu bạn chạy một dấu vết bạn sẽ thấy những kịch bản được nạp với một URL bao gồm một tham số timestamp:

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

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

===

Ngoài ra, trong tài liệu getScript() có một mã số mẫu mà chứng minh làm thế nào để cho phép bộ nhớ đệm bằng cách tạo ra 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ể làm như vậy bằng cách sử dụng ajaxSetup() như sau:

$.ajaxSetup({ 
    cache: true 
});