JQuery pour charger le fichier Javascript dynamiquement

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'aidera à le faire?

Un peu plus de détails: j'ai un bouton "Ajouter un commentaire" qui devrait charger le fichier javascript TinyMCE (j'ai fait bouillir tous les trucs TinyMCE en un seul fichier JS), puis appelez tinyMCE.init (...).

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

Je comprends que je peux simplement faire:

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

mais y a-t-il un meilleur moyen / encapsulé?

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

Vous voudrez peut-être vérifier si TinyMCE est défini, cependant, avant de l'inclure (pour les appels ultérieurs à `` Ajouter un commentaire '') afin que le code ressemble à ceci:

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

En supposant que vous n'ayez à appeler initqu'une seule fois, c'est. Sinon, vous pouvez le découvrir à partir d'ici :)

Je me rends compte que je suis un peu en retard ici, (environ 5 ans), 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();
            }
        });
    }
});

La getScript()fonction empêche en fait la mise en cache du navigateur . Si vous exécutez 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 #addCommentlien plusieurs fois, tinymce.jssera rechargé à partir d'une URL horodatée différemment. Cela va à l'encontre de l'objectif de la mise en cache du navigateur.

===

Sinon, dans la getScript()documentation, il existe un exemple de code qui montre comment activer la mise en cache en créant une cachedScript()fonction personnalisée 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 souhaitez désactiver la mise en cache globalement, vous pouvez le faire ajaxSetup()comme suit:

$.ajaxSetup({
    cache: true
});