动态加载执行 JS 文件、前端文件下载方式汇总

本文链接：https://blog.csdn.net/wangmx1993328/article/details/83818902

本文详细介绍了前端开发中JS文件的动态加载与重新加载方法，包括利用JQuery操作DOM实现JS文件的动态增删，以及使用jQuery.getScript()方法动态加载第三方JS文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端文件下载方式汇总

重新加载 JS 文件

动态加载 JS 文件

前端文件下载方式汇总

src/main/resources/static/download.html · 汪少棠/fileServer - Gitee.com。

第三方插件：download.js 文件下载。

开发中根据需求来动态加载 JS 文件，或者在某些情况下需要重新加载某个 JS 文件。

重新加载 JS 文件

应用中的某些 JS 文件如果在某些条件下需要重新加载时，最简单的思路就是先删除原来的 JS 文件，再重新添加。为了方便，使用 JQuery 操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>

    <!-- 自己操作的 JS 文件-->
    <script type="text/javascript" src="reloadJS.js"></script>
    <title>重新加载 JS 文件</title>
</head>
<body>
<button>重新加载 JS 文件</button>
<hr/>
</body>
</html>

reloadjs.js 文件内容如下：

/**
 * Created by Administrator on 2018/11/7 0007.
 */
console.log("reloadJS 开始加载 js 文件..." + new Date());
$(function () {
    $("button").click(function () {
        /**先删除原JS文件，再重新添加*/
        var reloadJS = $("script[src='reloadJS.js']").remove();
        reloadJS.appendTo("head");
    });
});
console.log("reloadJS 加载完毕 js 文件..." + new Date());

点击按钮效果如下，会重新加载 reload.js 文件：

动态加载 JS 文件

1、某些 JS 文件一开始并没有加载到文档中来，在某些条件下，动态加载此 JS 文件，然后执行。

2、JQuery 提供了一个 jQuery.getScript(url, [callback]) 方法可以非常方便的进行操作。

3、getScript 通过 HTTP GET 请求载入并执行一个 JavaScript 文件，文件载入成功后，即可操作其内部的内容，而无需反复载入。

4、url：待载入 JS 文件地址。

5、callback：成功载入后回调函数。

编码示例

6、reloadJS.html 中包含了 JQuery 与 reloadJS.js ，在 reloadJS.js 中动态加载 test.js 文件。

7、reloadJS.html 内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>

    <!-- 操作的 JS 文件-->
    <script type="text/javascript" src="reloadJS.js"></script>
    <title>动态加载 JS 文件</title>
</head>
<body>
<button id="loadJS">加载第三方 JS 文件</button><br><br>
<button id="loadFun">调用第三方 JS 方法</button>
</body>
</html>

reloadJS.js 内容如下：

/**
 * Created by Administrator on 2018/11/7 0007.
 */
$(function () {

    /**点击 "加载第三方 JS 文件" 按钮时，动态加载 test.js 文件
     * 在 test.js 文件加载成功后的回调方法中再调用 test.js 中的方法*/
    $("#loadJS").click(function () {
        $.getScript("test.js", function () {
            console.log("My name is reloadJS,test.js 加载成功");
            showDate("Hello");
        });
    });

    /**
     * 点击 "调用第三方 JS 方法" 按钮时，调用 test.js 文件中的方法
     * 注意：如果 test.js 已经使用 getScript 加载成功，则这里可以调用其方法
     * 如果 test.js 加载失败，或者未加载时，则这里调用显然报错：howDate is not defined
     */
    $("#loadFun").click(function () {
        showDate("Hi");
    });
});

test.js 文件内容如下：

/**
 * Created by Administrator on 2018/11/7 0007.
 */
console.log("My name is test.js，开始加载：" + new Date());
function showDate(order) {
    console.log("My name is test.js,now time：" + new Date().getTime() + ",order=" + order);
}
console.log("My name is test.js，加载完毕：" + new Date());