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

134

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

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

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

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

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

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

Джефф Фрикадельки Ян
источник
Это отличный форк компрессора TinyMCE, который добавляет асинхронную загрузку TinyMCE через плагин jQuery.tinyMCE и включает в себя Gzip, конкатенацию и минимизацию: github.com/bobbravo2/tinymce_compressor/blob/master/…
Боб Грегор,

Ответы:

200

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

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

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

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

Паоло Бергантино
источник
3
@Jose: Спасибо :), @Jeff: Нет проблем. Что касается удивительности jQuery, то это довольно неизвестно.
Паоло Бергантино
1
TLDR; делайте это только в том случае, если скрипты находятся в одном каталоге. Более длинная версия: getScript фактически внедряет JavaScript в текущие сценарии вместо страницы. это означает, что любые пути во включенном JavaScript будут относительно текущего документа.
Том Carchrae
23

Я понимаю, что немного опаздываю (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
});
Dana
источник
Возможно, это было недоступно, когда вы писали это, но учтите, что jQuery позволяет вам (глобально) отключить эту функцию без кэширования и снова разрешить кэширование. См. Api.jquery.com/jQuery.getScript/#caching-requests (О, я вижу, что здесь также упоминается подход $ .ajax (), о котором вы здесь говорите.)
Питер Хансен,
@PeterHansen - Спасибо за совет. Я обновил свой ответ с вашим предложением.
Дана
3
jQuery 1.12.0 или более поздняя версия поддерживает отключение встроенного антикаша следующим образом:$.getScript({url: "test.js",cache:true})
oriadam,