动态加载执行 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 文件

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

jQuery.getScript(url, [callback])

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

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

url:待载入 JS 文件地址。

callback:成功载入后回调函数。

编码示例

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

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());

猜你喜欢

转载自blog.csdn.net/wangmx1993328/article/details/83818902