JQuery pour charger dynamiquement un fichier Javascript

Question

J'ai un très gros fichier javascript que je voudrais charger uniquement si l'utilisateur clique sur un certain bouton. J'utilise jQuery comme framework. Existe-t-il une méthode intégrée ou un plugin qui m'aiderait à faire cela ?

Quelques détails supplémentaires : J'ai un bouton "Ajouter un commentaire" qui doit charger le fichier javascript de TinyMCE (j'ai résumé tout le matériel de TinyMCE en un seul fichier JS), puis appeler tinyMCE.init(...).

Je ne veux pas le charger au chargement initial de la page car tout le monde ne cliquera pas sur "Ajouter un commentaire".

Je comprends que je peux juste faire :

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

mais existe-t-il un moyen meilleur/encapsulé ?

Answer 1

Oui, utilisez getScript au lieu de document.write - cela permettra même de faire un rappel une fois le fichier chargé.

Vous pouvez cependant vérifier si TinyMCE est défini avant de l'inclure (pour les appels ultérieurs à "Ajouter un commentaire"). Le code pourrait ressembler à ceci :

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

En supposant que vous devez seulement appeler init sur elle une fois, c'est tout. Sinon, vous pouvez vous débrouiller à partir d'ici :)

Answer 2

Je me rends compte que je suis un peu en retard ici, (5 ans environ), mais je pense qu'il y a une meilleure réponse que celle acceptée comme suit :

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

En getScript() en fait, la fonction empêche la mise en cache du navigateur . Si vous lancez une trace, vous verrez que le script est chargé avec une URL qui inclut un paramètre d'horodatage :

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

Si un utilisateur clique sur le bouton #addComment lien plusieurs fois, tinymce.js sera rechargé à partir d'une URL différente. Cela va à l'encontre de l'objectif de la mise en cache du navigateur.

\===

Alternativement, dans le getScript() il existe un exemple de code qui montre comment activer la mise en cache en créant un fichier d'enregistrement personnalisé. cachedScript() comme suit :

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

\===

Ou, si vous voulez désactiver la mise en cache globalement, vous pouvez le faire en utilisant ajaxSetup() comme suit :

$.ajaxSetup({
    cache: true
});