js加载之使用DOM方法动态加载Javascript文件

一、使用DOM方法动态加载Javascript文件

使用方法

在HTML文档中，可以使用DOM方法动态的将Javascript文件载入到页面中。

<script type="text/javascript">
    function loadScript(url, callback) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        if (script.readyState){ //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" ||
                        script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others
            script.onload = function(){
                callback();
            };
        }
        script.src = url;
        document.head.appendChild(script);
    }

    loadScript("example.js", function() {
        // 在此处编写要执行的代码
        console.log("example.js 已被成功加载");
    });
</script>

最重要的是 loadScript() 函数，该函数接收两个参数：Javascript 文件的相对 URL，以及载入完成后将执行的回调函数。在函数内部，我们将创建一个 script 标签，并通过设置其 src 属性来指定 Javascript 文件的相对路径。接着，我们将新 script 标签添加到 head 标签中，然后监听 load 事件或者 readystatechange 事件，等待 Javascript 文件加载完毕以后调用回调函数。

示例说明

示例 1

我们可以通过动态加载第三方库，比如 JQuery 或者 Lodash。

<script type="text/javascript">
    function loadJQuery(callback) {
        loadScript("//code.jquery.com/jquery-3.2.1.min.js", callback);
    }

    loadJQuery(function() {
        // 在此处编写要使用 JQuery 执行的代码
        console.log("JQuery 已被成功加载");
    });
</script>

示例 2

我们也可以使用此方法动态加载本地 JS 文件，如下所示：

<script type="text/javascript">
    loadScript("example.js", function() {
        // 在此处编写要执行的代码
        console.log("example.js 已被成功加载");
    });
</script>

在本地相对路径下需要有 example.js 文件，该文件将在动态加载完成后执行。