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