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

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

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

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

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

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

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

2 127
javascript jquery jquery-plugins lazy-loading tinymce

2 ответа:

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

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

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

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

192

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

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

The getScript() следующим образом:

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