JQuery動態加載Javascript文件

Question

我有一個非常大的javascript文件，我只想在用戶點擊某個按鈕時加載。 我使用jQuery作為我的框架。 是否有內置方法或插件可以幫助我這樣做？

更多細節：我有一個“添加注釋”按鈕，應該加載TinyMCE javascript文件（我把所有TinyMCE的東西都煮成了一個JS文件），然后調用tinyMCE.init（...）。

我不想在初始頁面加載時加載它，因為不是每個人都會點擊“添加評論”。

我明白我可以這樣做：

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

但是有更好/封裝的方式嗎？

Answer 1

是的，使用getScript而不是document.write - 它甚至會在文件加載后允許回調。

您可能想要檢查是否已定義TinyMCE，然后再包含它（對於后續調用“添加注釋”），因此代碼可能如下所示：

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

假設你只需要調用一次init ，就是這樣。 如果沒有，你可以從這里弄清楚:)

Answer 2

我意識到我在這里有點晚了，（5年左右），但我認為有一個比接受的更好的答案如下：

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

getScript()函數實際上阻止了瀏覽器緩存 。 如果運行跟蹤，您將看到腳本加載了包含timestamp參數的URL：

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

如果用戶多次單擊#addComment鏈接，將從不同時間戳的URL重新加載tinymce.js 。 這違背了瀏覽器緩存的目的。

===

或者，在getScript()文檔中有一些示例代碼，演示如何通過創建自定義cachedScript()函數來啟用緩存，如下所示：

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

===

或者，如果要全局禁用緩存，可以使用ajaxSetup()執行此操作，如下所示：

$.ajaxSetup({
    cache: true
});