JQuery JavaScript-Datei dynamisch laden

Question

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

Einige weitere Details: Ich habe eine "Add Comment" -Schaltfläche, die die TinyMCE Javascript-Datei laden sollte (ich habe alle TinyMCE-Sachen in eine einzige JS-Datei heruntergekocht), dann rufen tinyMCE.init (...).

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

Ich verstehe, kann ich einfach tun:

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

aber gibt es einen besseren/gekapselten Weg?

Answer 1

Ja, verwenden Sie getScript anstelle von document.write - es ermöglicht sogar einen Rückruf, sobald die Datei geladen wird.

Vielleicht möchten Sie überprüfen, ob TinyMCE definiert ist, aber bevor es mit (für nachfolgende Aufrufe von ‚Kommentar hinzufügen‘), so könnte der Code wie folgt aussehen:

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

Sie nur zu der Annahme haben, Rufen Sie init darauf einmal, das ist. Wenn nicht, können Sie es herausfinden von hier :)

Answer 2

Ich weiß, ich bin ein wenig spät hier, (5 Jahre oder so), aber ich denke, es gibt eine bessere Antwort als die akzeptiert wie folgt:

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

Die getScript() Funktion tatsächlich verhindert Browser-Caching. Wenn Sie eine Spur laufen sehen Sie das Skript mit einer URL geladen wird, die einen Zeitstempel-Parameter enthält:

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

Wenn ein Benutzer den #addComment Link mehrfach klickt, wird tinymce.js von einer anders timestampped URL neu geladen werden. Dies verhindert den Zweck des Browser-Caching.

===

Alternativ kann in der getScript() Dokumentation gibt es einen einig Beispielcode, der zeigt, wie das Caching aktivieren, indem Sie eine benutzerdefinierte cachedScript() Funktion wie folgt zu 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); 
}); 

===

Oder, wenn Sie das Zwischenspeichern global deaktivieren möchten, können Sie dies mit ajaxSetup() wie folgt tun:

$.ajaxSetup({ 
    cache: true 
});