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()函数实际上阻止了浏览器缓存.如果运行跟踪,您将看到脚本加载了包含timestamp参数的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
});