JQuery para cargar el archivo Javascript dinámicamente

Question

Tengo un archivo javascript muy grande que me gustaría cargar solo si el usuario hace clic en un botón determinado. Estoy usando jQuery como mi marco. ¿Hay algún método o complemento incorporado que me ayude a hacer esto?

Un poco más de detalle: Tengo un botón "Agregar comentario" que debe cargar el archivo TinyMCE javascript (he hervido todas las cosas TinyMCE en un solo archivo JS), luego llamar a tinyMCE.init (...)

No quiero cargar esto en la carga de la página inicial porque no todos harán clic en "Agregar comentario".

entiendo que sólo puede hacer:

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

pero hay una manera mejor/encapsulado?

Answer 1

Sí, use getScript en lugar de document.write - incluso permitirá una devolución de llamada una vez que se carga el archivo.

Es posible que desee comprobar si se define TinyMCE, sin embargo, antes de incluirlo (para posteriores llamadas a 'Añadir comentario') por lo que el código podría ser algo como esto:

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

Suponiendo es suficiente con llama al init una vez, claro. Si no, puede comprenderlo a partir de aquí :)

Answer 2

Soy consciente de que estoy un poco tarde aquí, (5 años más o menos), pero creo que hay una respuesta mejor que la aceptada uno de la siguiente manera:

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

La función getScript() realidad impide el almacenamiento en caché del navegador. Si se ejecuta un seguimiento verá la secuencia de comandos se carga con una dirección URL que incluye un parámetro de marca de tiempo:

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

Si un usuario hace clic en los #addComment enlace varias veces, tinymce.js se volverá a cargarse desde una URL diferente timestampped. Esto frustra el propósito del almacenamiento en caché del navegador.

===

Por otra parte, en la documentación getScript() hay un código de ejemplo que muestra un poco de cómo habilitar el almacenamiento en caché mediante la creación de una función personalizada cachedScript() de la siguiente manera:

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

===

O, si desea deshabilitar el almacenamiento en caché globalmente, puede hacerlo usando ajaxSetup() de la siguiente manera:

$.ajaxSetup({ 
    cache: true 
});