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() 函数实际上防止浏览器缓存。如果您运行跟踪，您将看到脚本加载了一个包含时间戳参数的 URL：

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

如果用户多次单击#addComment 链接，tinymce.js 将从不同时间戳的 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
});