JQuery para cargar el archivo Javascript dinámicamente


134

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?

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

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

Entiendo que solo puedo hacer:

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

pero hay una manera mejor / encapsulada?


Este es un gran tenedor del compresor TinyMCE, que agrega carga asíncrona de TinyMCE a través del complemento jQuery.tinyMCE e incluye Gzip, concatenación y minificación
Bob Gregor

Respuestas:


200

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

Sin embargo, es posible que desee verificar si TinyMCE está definido antes de incluirlo (para 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();
        });
    }
});

Asumiendo que solo tienes que llamarlo inituna vez, eso es. Si no, puedes resolverlo desde aquí :)


3
@Jose: Gracias :), @Jeff: No hay problema. En cuanto a la genialidad de jQuery, esta es bastante desconocida.
Paolo Bergantino

1
TLDR; solo haga esto si los scripts están en el mismo directorio. Versión más larga: getScript realmente inyecta el javascript en los scripts actuales en lugar de la página. lo que esto significa es que cualquier ruta en el javascript incluido será relativa al documento actual.
Tom Carchrae

23

Me doy cuenta de que llego un poco tarde aquí (aproximadamente 5 años), pero creo que hay una mejor respuesta 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 getScript()función realmente evita el almacenamiento en caché del navegador . Si ejecuta un seguimiento, 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 #addCommentenlace varias veces, tinymce.jsse volverá a cargar desde una URL con marca de tiempo diferente. Esto anula el propósito del almacenamiento en caché del navegador.

===

Alternativamente, en la getScript()documentación hay un código de muestra que muestra cómo habilitar el almacenamiento en caché creando una cachedScript()función personalizada 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é a nivel mundial, puede hacerlo utilizando ajaxSetup()lo siguiente:

$.ajaxSetup({
    cache: true
});

Es posible que esto no haya estado disponible cuando escribió esto, pero tenga en cuenta que jQuery le permite (globalmente) desactivar esta función de no almacenamiento en caché y permitir el almacenamiento en caché nuevamente. Vea api.jquery.com/jQuery.getScript/#caching-requests (Oh, veo que el enfoque $ .ajax () que cubre aquí también se menciona allí).
Peter Hansen

@ PeterHansen - Gracias por el consejo. Actualicé mi respuesta con su sugerencia.
dana

3
jQuery 1.12.0 o posterior admite deshabilitar el anticache en línea de esta manera:$.getScript({url: "test.js",cache:true})
oriadam
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.