JQuerydynamic加载Javascript文件

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

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

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

我明白我可以这样做：

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

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

Answer 1

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

您可能需要检查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()函数实际上阻止浏览器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 });