JQuery 动态加载 Javascript 文件

javascript jquery jquery-plugins tinymce lazy-loading

2022-08-30 04:10:34

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

更多细节：我有一个“添加注释”按钮，应该加载TinyMCE javascript文件（我已经将所有TinyMCE的东西归结为一个JS文件），然后调用tinyMCE.init（...）。

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

我知道我可以做到：

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

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

答案 1

是的，使用getScript而不是document.write - 它甚至允许在文件加载后进行回调。

但是，在包含TinyMCE之前，您可能需要检查它是否已定义（用于对“添加注释”的后续调用），因此代码可能如下所示：

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

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

答案 2

我意识到我在这里有点晚了（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

如果用户多次单击该链接，则会从具有不同时间戳的 URL 重新加载。这违背了浏览器缓存的目的。#addCommenttinymce.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
});