wake-up-neo.net

JQuery zum dynamischen Laden von Javascript-Dateien

Ich habe eine sehr große Javascript-Datei, die ich nur laden möchte, wenn der Benutzer auf eine bestimmte Schaltfläche klickt. Ich benutze jQuery als Framework. Gibt es eine eingebaute Methode oder ein Plugin, die mir dabei helfen?

Noch ein paar Details: Ich habe eine Schaltfläche "Kommentar hinzufügen", die die TinyMCE-Javascript-Datei laden soll (ich habe das gesamte TinyMCE-Zeug in eine einzige JS-Datei zusammengefasst) und dann tinyMCE.init (...) aufruft.

Ich möchte dies nicht beim ersten Laden der Seite laden, da nicht jeder auf "Kommentar hinzufügen" klickt.

Ich verstehe, dass ich einfach Folgendes tun kann:

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

aber gibt es einen besseren/gekapselten Weg?

132

Ja, verwenden Sie getScript anstelle von document.write - es ist sogar ein Rückruf möglich, sobald die Datei geladen wurde.

Möglicherweise möchten Sie überprüfen, ob TinyMCE definiert ist, bevor Sie es einschließen (für nachfolgende Aufrufe von 'Kommentar hinzufügen'), damit der Code ungefähr so ​​aussieht:

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

Vorausgesetzt, Sie müssen init nur einmal aufrufen. Wenn nicht, können Sie es von hier aus herausfinden :)

199

Mir ist klar, dass ich hier etwas spät dran bin (ungefähr 5 Jahre), aber ich denke, es gibt eine bessere Antwort als die akzeptierte wie folgt:

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

Die getScript() -Funktion verhindert tatsächlich Browser-Caching. Wenn Sie einen Trace ausführen, wird das Skript mit einer URL geladen, die einen Zeitstempelparameter enthält:

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

Wenn ein Benutzer mehrmals auf den Link #addComment Klickt, wird tinymce.js Von einer URL mit einem anderen Zeitstempel erneut geladen. Dadurch wird der Zweck des Browser-Cachings außer Kraft gesetzt.

===

Alternativ finden Sie in der Dokumentation getScript() einen Beispielcode, der zeigt, wie Sie das Caching aktivieren, indem Sie eine benutzerdefinierte Funktion cachedScript() wie folgt erstellen:

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

===

Wenn Sie das Caching global deaktivieren möchten, können Sie dies mit ajaxSetup() wie folgt tun:

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