pagina - JQuery para cargar el archivo Javascript dinámicamente

mostrar loading mientras carga pagina jquery

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?

Más detalles: 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 deseo cargar esto en la carga de la página inicial porque no todos harán clic en "Agregar comentario".

Entiendo que puedo hacer lo siguiente:

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

pero, ¿hay una forma mejor / encapsulada?

Answer 1

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

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

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

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

===

Alternativamente, en la documentación de getScript() hay un código de ejemplo que demuestra cómo habilitar el almacenamiento en caché mediante la creación de una función personalizada cachedScript() 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 bien, si desea deshabilitar el almacenamiento en caché globalmente, puede hacerlo utilizando ajaxSetup() siguiente manera:

$.ajaxSetup({
    cache: true
});

Answer 2

Sí, utilice getScript lugar de document.write: incluso permitirá una devolución de llamada una vez que se cargue el archivo.

Sin embargo, es posible que desee comprobar si TinyMCE está definido antes de incluirlo (para las llamadas posteriores a ''Agregar comentario'') para que el código se vea así:

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

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