jQuery动态加载Javascript文件


134

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

一些更多的细节:我有一个“添加注释”按钮,应该加载TinyMCE javascript文件(我已经将所有TinyMCE的东西都煮成了一个JS文件),然后调用tinyMCE.init(...)。

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

我了解自己可以做到:

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

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


这是TinyMCE的压缩机,其经由jQuery.tinyMCE插件添加TinyMCE的的异步加载的一个很大的叉,并且包括Gzip已,级联和缩小:github.com/bobbravo2/tinymce_compressor/blob/master/...
鲍勃格里

Answers:


200

是的,使用getScript而不是document.write-文件加载后,它甚至可以允许回调。

但是,您可能想要在包含TinyMCE之前检查是否已定义TinyMCE(用于随后的对“ Add Comment”的调用),因此代码可能如下所示:

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

假设您只需要调用init一次即可。如果没有,您可以从这里解决:)


3
@Jose:谢谢:),@ Jeff:没问题。就jQuery令人敬畏的程度而言,这是一个未知数。
Paolo Bergantino,

1
TLDR;仅当脚本位于同一目录中时才这样做。较长的版本:getScript实际上将javascript注入当前的脚本中,而不是页面中。这意味着所包含的javascript上的任何路径都将相对于当前文档。
汤姆·卡克莱

23

我意识到我在这里迟了一点(大约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
});

当您编写此文件时,此功能可能尚不可用,但请注意,jQuery允许(全局)禁用此非缓存功能并允许再次缓存。请参阅api.jquery.com/jQuery.getScript/#caching-requests (哦,我也看到您在此处介绍的$ .ajax()方法也提到了。)
Peter Hansen

@PeterHansen-谢谢小费。我根据您的建议更新了答案。
dana 2015年

3
jQuery 1.12.0或更高版本支持禁用反缓存内联,如下所示:$.getScript({url: "test.js",cache:true})
oriadam '17
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.