jQuery para cargar archivos Javascript dinámicamente

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 framework. ¿Hay un método o plugin incorporado que me ayude a hacer esto?

Algunos detalles más: Tengo un botón "Agregar comentario" que debería cargar el archivo javascript de TinyMCE (he hervido todas las cosas de TinyMCE en un solo archivo JS), luego llamo a TinyMCE.init(...).

No quiero cargar esto en la carga inicial de la página porque no todos lo harán haz clic en "Añadir comentario".

Entiendo que solo puedo hacer:

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

Pero, ¿hay una forma mejor/encapsulada?

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

2 answers

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

Es posible que desee comprobar si TinyMCE está definido, sin embargo, antes de incluirlo (para llamadas posteriores a 'Add Comment') por lo que el código podría verse algo como esto:

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

Suponiendo que solo tienes que llamar a init una vez, es decir. Si no, puedes averiguarlo desde aquí:)

 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-08 14:49:31

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

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

El getScript() función en realidad evita el almacenamiento en caché del navegador. Si ejecuta un trace verá que el script se carga con una URL que incluye un parámetro de marca de tiempo: 

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

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

===

Alternativamente, en el getScript() documentación hay un código de ejemplo que muestra cómo habilitar el almacenamiento en caché creando 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é de forma global, puede hacerlo utilizando ajaxSetup() como sigue: 

$.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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-01 05:33:30