JQuerydynamic加载Javascript文件

我有一个非常大的JavaScript文件,我想加载只有当用户点击某个button。 我正在使用jQuery作为我的框架。 有没有一个内置的方法或插件可以帮助我做到这一点?

一些更多的细节:我有一个“添加评论”button,应该加载TinyMCE JavaScript文件(我把所有的TinyMCE东西煮成一个JS文件),然后调用tinyMCE.init(…)。

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

我明白我可以这样做:

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

但有没有更好的/封装的方式?

2 Solutions collect form web for “JQuerydynamic加载Javascript文件”

是的,使用getScript而不是document.write – 它甚至会允许一旦文件加载callback。

您可能需要检查TinyMCE是否已被定义,但在将其包含之前(对于“添加注释”的后续调用),代码可能如下所示:

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

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

我意识到自己在这里有点晚了,(5年左右),但我认为比以前接受的答案要好得多:

 $("#addComment").click(function() { if(typeof TinyMCE === "undefined") { $.ajax({ url: "tinymce.js", dataType: "script", cache: true, success: function() { TinyMCE.init(); } }); } }); 

getScript()函数实际上阻止浏览器caching 。 如果你运行一个跟踪,你会看到脚本加载了一个包含时间戳参数的URL:

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

如果用户多次点击#addComment链接, tinymce.js将从不同的时间戳URL重新加载。 这违背了浏览器caching的目的。

===

或者,在getScript()文档中有一些示例代码,演示如何通过创build自定义cachedScript()函数来启用caching,如下所示:

 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 ); }); 

===

或者,如果要全局禁用caching,则可以按如下所示使用ajaxSetup()

 $.ajaxSetup({ cache: true });