html 中脚本插入的奇怪行为

Question

我想在页脚 html 部分插入 2 个脚本，但我的行为很奇怪。如果我在 html 本身中使用标签手动插入，它就可以工作（index1.html）。但是，如果我使用 IIFE 创建标签并将它们插入到相同的位置和相同的顺序 (index2.html)，则控制台中会显示一条错误，提示“虚拟变量未定义”。常识告诉我这个错误没有问题（因为 dummy 是在使用后定义的），但为什么它适用于index1.html？

索引1.html：

    ...

    <script src="script1.js" async></script>

    <script src="script2.js"></script>

    </body>

</html>

索引2.html：

    ...

    <script>

        (function(){

            var loadScript = function(data, callback) {

                var script = document.createElement('script');

                script.src = data.src;

                if (data.opts) {

                    if (data.opts.async) script.async = data.opts.async;

                }

                document.body.appendChild(script);

            }

            var loadScriptRecursive = function(scripts, index) {

                loadScript(scripts[index], function () {

                    if (++index < scripts.length) loadScriptRecursive(scripts, index);

                });

            }

            var scripts = [{src: 'script1.js'}, {src: 'script2.js', opts: {async: false}}];

            loadScriptRecursive(scripts, 0);

        })()

    </script>

    </body>

</html>

脚本1.js：

$(document).ready(function () {

    if (dummy) ...

    ...

}

脚本2.js：

var dummy = true

Answer 1

首先，你声明了callback但从未给我们它。我想你的意思是这样的script.onload = callback;。(function() {  var loadScript = function(data, callback) {    var script = document.createElement("script");    script.src = data.src;    script.onload = callback; // NEW LINE    if (data.opts) {      if (data.opts.async) script.async = data.opts.async;    }    document.body.appendChild(script);  };  var loadScriptRecursive = function(scripts, index) {    loadScript(scripts[index], function() {      if (++index < scripts.length) {        loadScriptRecursive(scripts, index);      }    });  };让我们看看文档是怎么说的：.ready() 方法提供了一种在页面的文档对象模型 (DOM) 变得可以安全操作后立即运行 JavaScript 代码的方法。DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载。在第一个示例中，DOMContentLoaded加载 JS 文件后触发：在第二个示例中，DOMContentLoaded立即触发而不等待 JS 文件：这就是为什么你需要使用$(window).on("load", function() {});而不是$(document).ready(function() {});