Javascript 在执行主体中的脚本之前加载外部js文件（不带jQuery）_Javascript

Javascript 在执行主体中的脚本之前加载外部js文件（不带jQuery）

javascript

Javascript 在执行主体中的脚本之前加载外部js文件（不带jQuery）,javascript,Javascript,我有一个站点，在它在dom中执行代码之前，应该首先加载外部js代码，但我不工作。每次我的外部代码加载到body标记中的js之后，是什么导致了诸如未定义的类和变量之类的问题 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

我有一个站点，在它在dom中执行代码之前，应该首先加载外部js代码，但我不工作。每次我的外部代码加载到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>

我还尝试了“addEventListener（'DOMContentLoaded'，function（）{…}）；”但它也确实起了作用

我希望你能帮助我

编辑1：请求订单

/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);
    }
}

/script.js

/project/script1.js

/project/script2.js

./project/script3.js

加载带有延迟属性的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>


地点
项目

参考和进一步阅读

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

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

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

（函数（）{
var dom=document.getElementById（“项目”）；
if（dom！==null）{
dom.innerHTML=“Iam load.js”+新日期（）.toString（）+””；
log（“Iam load.js”+new Date（）.toString（））；
}
})();

Javascript-script.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());
  }
})();

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

（函数（）{
var dom=document.getElementById（“项目”）；
if（dom！==null）{
dom.innerHTML=dom.innerHTML+“Iam script.js”+新日期（）.toString（）+“”；
log（“Iam script.js”+new Date（）.toString（））；
}
})();

输出

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

no它先执行first script.js，然后再执行load.js。它不起作用是的，在标记中放入一些文本很容易，但是你不使用load.js加载其他脚本，因此它对我没有帮助，因为这是我的问题将你的其他脚本链接到load.js。这意味着在load.js中实例化或调用其他脚本。脚本标记上有一个onload属性。以编程方式添加其他脚本。如果先加载当前脚本，则加载下一个脚本。参考这篇文章，但是onload应该做什么，因为load.js只加载脚本，不执行脚本。参考这2篇文章。一个使用async-on-script（async不保证您的脚本将以什么顺序加载，或者哪个将首先加载），另一个使用script-onload标记