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-адресою, що містить параметр часової позначки:

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