JQuery dynamicznie ładuje plik Javascript

Mam bardzo duży plik javascript, który chciałbym załadować tylko wtedy, gdy użytkownik kliknie określony przycisk. Używam jQuery jako mojego frameworka. Czy istnieje wbudowana metoda lub wtyczka, która pomoże mi to zrobić?

Trochę więcej szczegółów: Mam przycisk "Dodaj komentarz", który powinien załadować plik javascript TinyMCE (ugotowałem wszystkie rzeczy TinyMCE do jednego pliku JS), a następnie wywołać tinyMCE.init(...).

Nie chcę tego ładować przy początkowym ładowaniu strony, ponieważ nie każdy będzie kliknij "Dodaj komentarz".

Rozumiem, że mogę po prostu zrobić: 

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

Ale czy jest lepszy / zamknięty sposób?

Author: Jeff Meatball Yang, 2009-05-27
Source

2 answers

Tak, użyj getScript zamiast dokumentu.write - pozwoli nawet na wywołanie zwrotne po załadowaniu pliku.

Możesz sprawdzić, czy TinyMCE jest zdefiniowany, zanim go włączysz (dla kolejnych wywołań "Dodaj komentarz"), aby Kod mógł wyglądać mniej więcej tak: 

$('#add_comment').click(function() {
    if(typeof TinyMCE == "undefined") {
        $.getScript('tinymce.js', function() {
            TinyMCE.init();
        });
    }
});
Zakładając, że musisz zadzwonić tylko raz. Jeśli nie, możesz to rozgryźć stąd:)
 192
Author: Paolo Bergantino,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-08 14:49:31

Zdaję sobie sprawę, że jestem trochę spóźniony, (około 5 lat), ale myślę, że jest lepsza odpowiedź niż przyjęta w następujący sposób: 

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

The getScript() funkcja faktycznie zapobiega buforowaniu przeglądarki. Jeśli uruchomisz śledzenie, zobaczysz, że skrypt jest ładowany z adresem URL zawierającym parametr timestamp: 

http://www.yoursite.com/js/tinymce.js?_=1399055841840

Jeśli użytkownik kliknie link #addComment wiele razy, tinymce.js zostanie ponownie załadowany z adresu URL o innym znaczniku czasu. To niszczy cel buforowania przeglądarki.

===

Alternatywnie, w getScript() dokumentacja istnieje przykładowy kod, który demonstruje, jak włączyć buforowanie poprzez utworzenie niestandardowej funkcji cachedScript() w następujący sposób: 

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

===

Lub, jeśli chcesz wyłączyć buforowanie globalnie, możesz to zrobić za pomocą ajaxSetup() Jak Następuje: 

$.ajaxSetup({
    cache: true
});
 20
Author: dana,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-01 05:33:30