jquery动态加载javascript文件


JQuery to load Javascript file dynamically

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

更多细节：我有一个"添加注释"按钮，可以加载tinymce的javascript文件(我已经将所有tinymce的内容分解为一个JS文件)，然后调用tinymce.init(…)。

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

我明白我能做到：

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

但是有更好的/封装的方法吗？

相关讨论

是的，使用getscript而不是document.write-它甚至允许在加载文件后进行回调。

不过，在包含tinymce之前(对于随后的"add comment"调用)，您可能需要检查是否定义了tinymce，因此代码可能如下所示：

1
2
3
4
5
6
7
$('#add_comment').click(function() {
    if(typeof TinyMCE =="undefined") {
        $.getScript('tinymce.js', function() {
            TinyMCE.init();
        });
    }
});

假设你只需要打一次电话给init，也就是说。如果不是，你可以从这里找到答案：

相关讨论

我意识到我在这里有点晚了，(5年左右)，但我认为有一个更好的答案比接受的一个如下：

1
2
3
4
5
6
7
8
9
10
11
12
$("#addComment").click(function() {
    if(typeof TinyMCE ==="undefined") {
        $.ajax({
            url:"tinymce.js",
            dataType:"script",
            cache: true,
            success: function() {
                TinyMCE.init();
            }
        });
    }
});

getScript()功能实际上阻止了浏览器缓存。如果运行跟踪，您将看到脚本加载了一个包含时间戳参数的URL：

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

如果用户多次点击#addComment链接，tinymce.js将从不同的时间戳URL重新加载。这会破坏浏览器缓存的目的。

= =

或者，在getScript()文档中，有一些示例代码演示了如何通过创建自定义cachedScript()函数来启用缓存，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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()如下所示：

1
2
3
$.ajaxSetup({
    cache: true
});
相关讨论