动态加载执行 JS 文件、对话框 confirm 方法

素颜马尾好姑娘i 2022-04-18 02:18 249阅读 0赞

**目录**

重新加载 JS 文件

动态加载 JS 文件

对话框 confirm 方法

--------------------

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

# 重新加载 JS 文件 #

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                crossorigin="anonymous"></script>
    
        
        <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 文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

# 动态加载 JS 文件 #

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

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

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

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

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

**编码示例**

![201811071136240.png][]

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

**7、reloadJS.html 内容如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                crossorigin="anonymous"></script>
    
        
        <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());

![20181107115120509.gif][]

# 对话框 confirm 方法 #

1、confirm(message) 方法用于显示一个带有指定消息和 “ 确定” 及 “ 取消 ” 按钮的对话框。

2、如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

3、在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。

4、在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("input").bind("click", function () {
                    if (confirm("您确定前往百度吗?")) {
                        location.href = "http://www.baidu.com";
                    }
                });
            });
        </script>
    </head>
    <body>
    <input type="button" value="点我"/>
    </body>
    </html>

![20191210205401368.gif][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220418/b5dc9e4cac1f4c909fe1b6c22962bc3b.png
[201811071136240.png]: /images/20220418/5b93dafaf5b043afa908df738071e8c7.png
[20181107115120509.gif]: /images/20220418/e1757c35cee544ad9a33895eb7876c62.png
[20191210205401368.gif]: /images/20220418/029c672cf46644f5b498b09b07419c08.png