load an external js file before script in body executes (without jQuery)

Question

I have a site that should first load external js codes before it executes code in the dom but i wont work. Everytime my external codes load after the js in the body tag what caused problems like undefined classes and variables

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

I tried also with 'addEventListener('DOMContentLoaded', function() {...});' but it did work either.

I hope you can help me.

EDIT 1: request order

./project/load.js

./script.js

./project/script1.js

./project/script2.js

./project/script3.js

score 1 · Answer 1 · answered Jun 15 '19 at 20:12

Load your javascript with defer attribute. Replace your HTML with below. The "defer" attribute allows the javascript is run only after the page loading is complete. Meaning the DOM is available

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

References and further read

no it executes first script.js and than load.js. It doesn't work — Play_it, Jun 15 '19 at 20:34

score 0 · Answer 2 · answered Jun 15 '19 at 20:55

0

Here is what i've done. Please look at this below

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

Output

You can see that the order in which i've added the script loads first.

answered Jun 15 '19 at 20:55

Haseeb Afsar

619
5
7

yes to put some text in a tag is easy but you dont load other scripts with load.js and so it doesn't help me because this is my problem – Play_it Jun 15 '19 at 21:25
Chain your other scripts to load.js. Meaning instantiate or invoke your other scripts inside load.js. There is a onload attribute on script tag. Add the other scripts programmatically. Load the next script if your current script is loaded first. Refer this post https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js – Haseeb Afsar Jun 15 '19 at 22:48
but what should onload do because load.js only loads scripts but doesn't execute them – Play_it Jun 16 '19 at 11:08
Refer this 2 posts. one using async on script (async doesnt guarantee in which order your scripts will load or which one will first load) and other one using the script onload tag https://stackoverflow.com/questions/45869839/javascript-run-inline-script-after-load-async-resources – Haseeb Afsar Jun 17 '19 at 19:21

load an external js file before script in body executes (without jQuery)

2 Answers2