JQuery zum dynamischen Laden der Javascript-Datei

134

Ich habe eine sehr große Javascript-Datei, die ich nur laden möchte, wenn der Benutzer auf eine bestimmte Schaltfläche klickt. Ich verwende jQuery als Framework. Gibt es eine integrierte 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 auf eine einzige JS-Datei reduziert) 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, ich kann einfach:

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

Aber gibt es einen besseren / gekapselten Weg?

Jeff Fleischbällchen Yang
quelle
Dies ist eine großartige Abzweigung des TinyMCE-Kompressors, die das asynchrone Laden von TinyMCE über das jQuery.tinyMCE-Plugin hinzufügt und Gzip, Verkettung und Minimierung enthält: github.com/bobbravo2/tinymce_compressor/blob/master/…
Bob Gregor

Antworten:

200

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

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

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

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

Paolo Bergantino
quelle
3
@ Jose: Danke :), @ Jeff: Kein Problem. Was die Attraktivität von jQuery angeht, ist diese ziemlich unbekannt.
Paolo Bergantino
1
TLDR; Tun Sie dies nur, wenn sich die Skripte im selben Verzeichnis befinden. Längere Version: getScript fügt das Javascript tatsächlich in aktuelle Skripte anstelle der Seite ein. Dies bedeutet, dass alle Pfade im enthaltenen Javascript relativ zum aktuellen Dokument sind.
Tom Carchrae
23

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 das Zwischenspeichern des Browsers . Wenn Sie eine Ablaufverfolgung 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 #addCommentmehrmals auf den Link klickt , tinymce.jswird er von einer anderen URL mit Zeitstempel neu geladen. Dies macht den Zweck des Browser-Caching zunichte.

===

Alternativ finden Sie in der getScript()Dokumentation einen Beispielcode, der zeigt, wie das Caching durch Erstellen einer benutzerdefinierten cachedScript()Funktion wie folgt aktiviert wird :

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 ajaxSetup()wie folgt tun :

$.ajaxSetup({
    cache: true
});
Dana
quelle
Dies war möglicherweise nicht verfügbar, als Sie dies geschrieben haben. Beachten Sie jedoch, dass Sie mit jQuery (global) diese Funktion ohne Caching deaktivieren und das Caching erneut zulassen können. Siehe api.jquery.com/jQuery.getScript/#caching-requests (Oh, ich sehe, dass der Ansatz von $ .ajax (), den Sie hier behandeln, auch dort erwähnt wird.)
Peter Hansen
@ PeterHansen - Danke für den Tipp. Ich habe meine Antwort mit Ihrem Vorschlag aktualisiert.
dana
3
jQuery 1.12.0 oder höher unterstützt das Deaktivieren des Anticache-Inline wie $.getScript({url: "test.js",cache:true})
folgt