JQuery для динамической загрузки файла Javascript

У меня есть очень большой файл JavaScript, который я хотел бы загрузить, только если пользователь нажимает на определенную кнопку. Я использую JQuery в качестве моей основы. Есть ли встроенный метод или плагин, который поможет мне сделать это?

Немного подробнее: у меня есть кнопка «Добавить комментарий», которая должна загрузить файл JavaScript 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-адресом, который включает параметр timestamp:

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