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

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

132 голосов
/ 27 мая 2009

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

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

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

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

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

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

Ответы [ 2 ]

198 голосов
/ 27 мая 2009

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

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

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

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

21 голосов
/ 02 мая 2014

Я понимаю, что немного опоздал (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
});
...