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(); }); } }); |
假设你只需要打一次电话给
我意识到我在这里有点晚了,(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(); } }); } }); |
1 | http://www.yoursite.com/js/tinymce.js?_=1399055841840 |
如果用户多次点击
= =
或者,在
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 ); }); |
= =
或者,如果要全局禁用缓存,可以使用
1 2 3 | $.ajaxSetup({ cache: true }); |