在正文中的脚本执行之前加载外部 js 文件（没有 jQuery）答案

【问题标题】：load an external js file before script in body executes (without jQuery)在正文中的脚本执行之前加载外部 js 文件（没有 jQuery）
【发布时间】：2019-06-16 04:55:41
【问题描述】：

我有一个网站应该先加载外部 js 代码，然后再在 dom 中执行代码，但我不会工作。每次我的外部代码在 body 标记中的 js 之后加载时，会导致诸如未定义的类和变量之类的问题

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Site</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./project/load.js"></script>
</head>
<body>
    <h1>project</h1>
    <div id="project"></div>
    <script src="./script.js"></script>
</body>
</html>

./project/load.js

window.onload = function() {
    var links = ["./project/script1.js", "./project/script2.js", "./project/script3.js"];
    for(var link of links) {
        var script = document.createElement("script");
        script.src = link + "?0";
        script.setAttribute("onerror", "reload(this)");
        document.head.append(script);
    }
}

我也尝试了 'addEventListener('DOMContentLoaded', function() {...});'但它也确实有效。

我希望你能帮助我。

编辑 1：请求订单

./project/load.js

./script.js

./project/script1.js

./project/script2.js

./project/script3.js

【问题讨论】：

标签： javascript

【解决方案1】：

使用 defer 属性加载您的 javascript。将您的 HTML 替换为以下内容。 “defer”属性允许 javascript 仅在页面加载完成后运行。表示 DOM 可用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Site</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1>project</h1>
    <div id="project"></div>
    <script src="./project/load.js" defer></script>
    <script src="./script.js" defer></script>
</body>
</html>

参考和进一步阅读

【讨论】：

不，它首先执行 script.js，然后执行 load.js。它不起作用

【解决方案2】：

这就是我所做的。请看下面这个

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Site</title>

</head>
<body>
    <h1>project</h1>
    <div id="project"></div>
    <script src="load.js" defer></script>
    <script src="script.js" defer></script>
</body>
</html>

Javascript - load.js

(function(){
  var dom = document.getElementById("project");
  if( dom !== null ){
    dom.innerHTML =  "<p>Iam load.js " + new Date().toString() + "</p>";
    console.log("Iam load.js " + new Date().toString());
  }
})();

Javascript - script.js

(function(){
  var dom = document.getElementById("project");
  if( dom !== null ){
    dom.innerHTML = dom.innerHTML + "<p>Iam script.js " + new Date().toString() + "</p>";

    console.log("Iam script.js " + new Date().toString());
  }
})();

输出

您可以看到我添加脚本的顺序首先加载。

【讨论】：

是的，将一些文本放在标签中很容易，但您不会使用 load.js 加载其他脚本，所以它对我没有帮助，因为这是我的问题
将您的其他脚本链接到 load.js。意思是在 load.js 中实例化或调用你的其他脚本。脚本标签上有一个 onload 属性。以编程方式添加其他脚本。如果首先加载当前脚本，则加载下一个脚本。参考这篇文章stackoverflow.com/questions/14521108/…
但是 onload 应该怎么做，因为 load.js 只加载脚本但不执行它们
参考这 2 个帖子。一个在脚本上使用异步（异步不保证您的脚本将按哪个顺序加载或哪个将首先加载），另一个使用脚本 onload 标签stackoverflow.com/questions/45869839/…