使用JQuery动态加载Javascript文件

Question

我有一个非常大的JavaScript文件，我希望只有用户点击某个按钮时才加载它。 我使用jQuery作为我的框架。 是否有内置方法或插件可以帮助我做到这一点？

更多细节： 我有一个“添加评论”按钮，应该加载TinyMCE JavaScript文件（我已将所有TinyMCE内容简化为单个JS文件），然后调用tinyMCE.init(...)。

我不想在初始页面加载时加载它，因为并非每个人都会点击“添加评论”。

我了解我可以执行以下操作：

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

但有更好/封装的方式吗？

- Jeff Meatball Yang

---

这是TinyMCE压缩器的一个很棒的分支，它通过jQuery.tinyMCE插件添加了TinyMCE的异步加载，并包括Gzip、连接和最小化：https://github.com/bobbravo2/tinymce_compressor/blob/master/tiny_mce_gzip.php - Bob Gregor

Answer 1

可以使用getScript代替document.write，它甚至允许在文件加载后进行回调。

不过，在包含TinyMCE之前，您可能需要检查是否已定义（对于“添加评论”的后续调用），因此代码可能如下所示：

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

假设你只需要调用init一次，那么就是这样。如果不是的话，你可以从这里找到答案 :)

- Paolo Bergantino

---

@Jose：谢谢 :)，@Jeff：没问题。就jQuery的酷炫程度而言，这个还相对比较不知名。 - Paolo Bergantino

简短版：只有在脚本位于同一目录下时才执行此操作。详细版：getScript实际上是将JavaScript注入到当前脚本中，而不是页面中。这意味着包含的JavaScript中的任何路径都将相对于当前文档。 - Tom Carchrae

Answer 2

我意识到我来晚了（大约五年左右），但我认为有一个更好的答案比接受的答案好，如下：

$("#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
});

- dana

---

这可能在您编写此代码时不可用，但请注意，jQuery允许您（全局）禁用此无缓存功能并再次允许缓存。请参见http://api.jquery.com/jQuery.getScript/#caching-requests（哦，我看到您在此处介绍的$.ajax()方法也在那里提到了。） - Peter Hansen

@PeterHansen - 感谢您的建议。我已经更新了我的答案。 - dana

jQuery 1.12.0 或更新版本支持通过以下方式禁用内联防缓存功能：$.getScript({url: "test.js",cache:true})。 - oriadam