web-dev-qa-db-fra.com

JQuery pour charger le fichier Javascript de manière dynamique

J'ai un très gros fichier javascript que je ne voudrais charger que 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 à faire cela?

Quelques détails supplémentaires: j'ai un bouton "Ajouter un commentaire" qui devrait charger le fichier javascript de TinyMCE (j'ai réduit tout le contenu de TinyMCE à un seul fichier JS), puis appeler tinyMCE.init (...).

Je ne veux pas charger ceci lors du 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 y a-t-il une meilleure manière/encapsulée?

javascriptjqueryjquery-pluginstinymcelazy-loading
132
Jeff Meatball Yang

Oui, utilisez getScript au lieu de document.write - il permettra même un rappel lors du chargement du fichier.

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

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

En supposant que vous n’ayez à appeler que init dessus une fois, c’est-à-dire. Si non, vous pouvez le comprendre à partir d'ici :)

199
Paolo Bergantino

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

Le getScript() fonctionne réellement empêche la mise en cache du navigateur. Si vous exécutez une trace, vous verrez que le script est chargé avec une URL comprenant un paramètre d'horodatage:

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

Si un utilisateur clique plusieurs fois sur le lien #addComment, tinymce.js Sera rechargé à partir d'une URL dont l'horodatage est différent. Cela annule l'objectif de la mise en cache du navigateur.

===

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

$.ajaxSetup({
    cache: true
});
21
dana