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

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

Дополнительная информация: У меня есть кнопка "Добавить комментарий", которая должна загружать javascript файл TinyMCE (я откинул все материалы TinyMCE до одного JS файла), а затем вызовите tinyMCE.init(...).

Я не хочу загружать это при начальной загрузке страницы, потому что не все будут нажимать "Добавить комментарий".

Я понимаю, что могу просто сделать:

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

но есть ли лучший/инкапсулированный способ?

Ответ 1

Да, используйте getScript вместо document.write - он даже позволит выполнить обратный вызов после загрузки файла.

Возможно, вы захотите проверить, определен ли TinyMCE, прежде чем включать его (для последующих вызовов "Добавить комментарий" ), поэтому код может выглядеть примерно так:

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

Предполагая, что вам нужно только позвонить init на нем один раз, то есть. Если нет, вы можете понять это здесь:)

Ответ 2

Я понимаю, что я немного опаздываю здесь (5 лет или около того), но я думаю, что есть лучший ответ, чем принятый:

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

Функция getScript() фактически предотвращает кеширование браузера. Если вы запустите трассировку, вы увидите, что script загружен 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
});