JQuery per caricare dinamicamente il file Javascript

Question

Ho un file javascript molto grande che vorrei caricare solo se l'utente fa clic su un determinato pulsante. Sto usando jQuery come framework. C'è un metodo o un plugin integrato che mi aiuterà a farlo?

Altri dettagli: Ho un pulsante "Aggiungi commento" che dovrebbe caricare il file javascript di TinyMCE (ho fatto bollire tutti gli elementi di TinyMCE in un singolo file JS), quindi chiamare tinyMCE.init (...).

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

ho capito che posso solo fare:

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

, ma c'è un modo migliore/incapsulato?

Answer 1

Sì, utilizzare getScript anziché document.write - consente anche una richiamata dopo il caricamento del file.

Si potrebbe voler controllare se TinyMCE è definito, anche se, prima di includere (per le chiamate successive a 'Add Comment') in modo che il codice potrebbe essere simile a questa:

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

Supponendo di avere solo chiama init su di esso una volta, cioè. In caso contrario, si può capire da qui :)

Answer 2

mi rendo conto che sono un po 'in ritardo qui, (5 anni o giù di lì), 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 funzione getScript() realtà impedisce il caching del browser. Se si esegue una traccia si vedrà lo script è caricato con un URL che include un parametro timestamp:

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

Se un utente fa clic più volte #addComment link, tinymce.js saranno ricaricati da un URL diverso timestampped. Ciò vanifica lo scopo della memorizzazione nella cache del browser.

===

In alternativa, nella documentazione getScript() c'è un codice di qualche esempio che illustra come attivare la memorizzazione nella cache con la creazione di una funzione personalizzata cachedScript() 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); 
}); 

===

Oppure, se si desidera disattivare globalmente la cache, è possibile farlo utilizzando ajaxSetup() come segue:

$.ajaxSetup({ 
    cache: true 
});