在主體中的腳本執行之前加載外部js文件（無jQuery）

Question

我有一個網站，該網站應首先加載外部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

Answer 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>

參考資料和進一步閱讀

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

產量

您可以看到，我添加腳本的順序是先加載的。

在主體中的腳本執行之前加載外部js文件（無jQuery）

問題描述

2 個解決方案

解決方案1
1 2019-06-15 20:12:50

解決方案2
0 2019-06-15 20:55:41

在主體中的腳本執行之前加載外部js文件（無jQuery）

問題描述

2 個解決方案

解決方案1 1 2019-06-15 20:12:50

解決方案2 0 2019-06-15 20:55:41

解決方案1
1 2019-06-15 20:12:50

解決方案2
0 2019-06-15 20:55:41