jQuery來加載JavaScript文件動態

122

我有一個非常大的JavaScript文件，我想，如果用戶點擊某個按鈕，僅加載。我使用jQuery作爲我的框架。有沒有內置的方法或插件可以幫助我做到這一點？我有一個「添加評論」按鈕，應該加載TinyMCE javascript文件（我把所有的TinyMCE東西煮成一個單一的JS文件），然後調用tinyMCE.init（... ...））。jQuery來加載JavaScript文件動態

我不想在初始頁面加載加載這一點，因爲並不是每個人都會點擊「添加註釋」。

我明白我可以這樣做：

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

，但有沒有更好的/封裝方式？

來源

2009-05-26 Jeff Meatball Yang

我的問題太多。 – 2010-03-23 22:01:45

這是TinyMCE的壓縮機，其經由jQuery.tinyMCE插件添加TinyMCE的的異步加載的一個很大的叉，並且包括Gzip已，級聯和縮小：HTTPS：//github.com/bobbravo2/tinymce_compressor/blob/master/tiny_mce_gzip。 php – 2012-12-27 19:19:36

188

是，使用getScript而不是文件撰寫 - 它甚至會允許一個回調，一旦文件加載。

您可能要檢查是否TinyMCE的定義，不過，這已經是（用於後續調用「添加評論」）之前，使代碼可能是這個樣子：

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

假設你只需要那就撥打init一次，就是這樣。如果沒有，你可以從這裏找到答案:)

來源

2009-05-26 20:54:32

+10

你是jQuery大師+1 – 2009-05-26 20:56:24

我知道我有點晚了這裏，（5年左右），但我覺得沒有比接受一個更好的答案如下：

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

的getScript()函數實際上防止瀏覽器緩存。如果您運行跟蹤，你會看到腳本加載了包括時間戳參數中的URL：

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

如果用戶點擊#addComment聯繫多次，tinymce.js會從不同timestampped URL重新加載。這違背了瀏覽器緩存的目的。

===

或者，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 
});

來源

2014-05-02 19:30:15 dana

jQuery來加載JavaScript文件動態

回答

相關問題