138

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

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

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

我知道我可以这样做：

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

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

4

2 回答 2

204

是的，使用getScript而不是 document.write - 一旦文件加载，它甚至允许回调。

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

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

假设你只需要调用init一次，就是这样。如果没有，你可以从这里弄清楚:)

于 2009-05-26T20:54:32.763 回答
23

我意识到我在这里有点晚了（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
});
于 2014-05-02T19:30:15.133 回答