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

Haseeb Afsar · Accepted Answer · 2019-06-15 20:12:50Z

1

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

answered Jun 15, 2019 at 20:12

Haseeb Afsar

6296 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Play_it Over a year ago

no it executes first script.js and than load.js. It doesn't work

Haseeb Afsar · Accepted Answer · 2019-06-15 20:55:41Z

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, 2019 at 20:55

Haseeb Afsar

6296 silver badges7 bronze badges

4 Comments

Play_it Over a year ago

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

Haseeb Afsar Over a year ago

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 stackoverflow.com/questions/14521108/…

Play_it Over a year ago

but what should onload do because load.js only loads scripts but doesn't execute them

Haseeb Afsar Over a year ago

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 stackoverflow.com/questions/45869839/…

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related