JQuery 动态加载 Javascript 文件

我有一个非常大的 javascript 文件，我想加载只有当用户点击某个按钮。我使用 jQuery 作为框架。是否有一个内置的方法或插件，将帮助我做到这一点？

更多细节: 我有一个“添加评论”按钮，它应该加载 TinyMCE javascript 文件(我已经把所有 TinyMCE 的东西浓缩到一个单一的 JS 文件) ，然后调用 tinyMCE.init (...)。

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

我知道我可以这么做:

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

但是有没有更好的/封装的方法呢？

128813 次浏览
小开
最佳答案

是的，使用 GetScript代替 document.write ——它甚至允许在文件加载后进行回调。

但是，在包含 TinyMCE 之前(对于后续的“添加注释”调用) ，您可能需要检查 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()函数实际上是 防止浏览器缓存。如果您运行一个跟踪，您将看到脚本加载了一个包含时间戳参数的 URL:

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

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

===

或者，在 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
});

提交答案