JQuery zum dynamischen Laden der Javascript-Datei

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?

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 :)

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