JQuery per caricare dinamicamente il file Javascript


134

Ho un file javascript molto grande che vorrei caricare solo se l'utente fa clic su un determinato pulsante. Sto usando jQuery come il mio framework. Esiste un metodo o plug-in integrato che mi aiuterà a farlo?

Qualche dettaglio in più: ho un pulsante "Aggiungi commento" che dovrebbe caricare il file javascript TinyMCE (ho ridotto tutto il materiale TinyMCE in un singolo file JS), quindi chiama tinyMCE.init (...).

Non voglio caricarlo al caricamento della pagina iniziale perché non tutti faranno clic su "Aggiungi commento".

Capisco di poter semplicemente fare:

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

ma esiste un modo migliore / incapsulato?


Questo è un ottimo fork del compressore TinyMCE, che aggiunge il caricamento asincrono di TinyMCE tramite il plug-in jQuery.tinyMCE e include Gzip, concatenazione e minificazione: github.com/bobbravo2/tinymce_compressor/blob/master/…
Bob Gregor,

Risposte:


200

Sì, usa getScript invece di document.write: consentirà anche di richiamare una volta caricato il file.

Potresti voler verificare se TinyMCE è definito, tuttavia, prima di includerlo (per le chiamate successive a "Aggiungi commento") in modo che il codice possa assomigliare a questo:

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

Supponendo di doverlo fare solo inituna volta, cioè. Altrimenti, puoi capirlo da qui :)


3
@Jose: grazie :), @Jeff: nessun problema. Per quanto riguarda la bellezza di jQuery, questa è abbastanza sconosciuta.
Paolo Bergantino,

1
TLDR; fallo solo se gli script sono nella stessa directory. Versione più lunga: getScript inietta effettivamente il javascript negli script attuali anziché nella pagina. ciò significa che qualsiasi percorso sul javascript incluso sarà relativo al documento corrente.
Tom Carchrae,

23

Mi rendo conto di essere un po 'in ritardo qui (circa 5 anni), ma penso che ci sia una risposta migliore di quella accettata come segue:

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

La getScript()funzione impedisce effettivamente la memorizzazione nella cache del browser . Se esegui una traccia, vedrai che lo script viene caricato con un URL che include un parametro timestamp:

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

Se un utente fa clic #addCommentpiù volte sul collegamento, tinymce.jsverrà ricaricato da un URL con timestamp diverso. Ciò vanifica lo scopo della memorizzazione nella cache del browser.

===

In alternativa, nella getScript()documentazione è presente un codice di esempio che dimostra come abilitare la memorizzazione nella cache creando una cachedScript()funzione personalizzata come segue:

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

===

In alternativa, se si desidera disabilitare la memorizzazione nella cache a livello globale, è possibile farlo nel modo ajaxSetup()seguente:

$.ajaxSetup({
    cache: true
});

Questo potrebbe non essere disponibile quando hai scritto questo, ma tieni presente che jQuery ti consente (a livello globale) di disabilitare questa funzionalità di no-caching e consentire di nuovo la memorizzazione nella cache. Vedi api.jquery.com/jQuery.getScript/#caching-requests (Oh, vedo che l'approccio $ .ajax () che copri qui è anche menzionato lì.)
Peter Hansen,

@PeterHansen - Grazie per il suggerimento. Ho aggiornato la mia risposta con il tuo suggerimento.
dana,

3
jQuery 1.12.0 o successivo supporta la disabilitazione $.getScript({url: "test.js",cache:true})
dell'anti
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.