Immediately execute dynamically loaded JS script

Question

at the top of the head of my document I dynamically load a script:

<script>
var script = document.createElement("script");
script.setAttribute("src", "mydomain.com/main.js");
var head = document.head;
head.insertBefore(script, head.firstChild);
</script>

Content of main.js:

console.log('test');

However, the page loads fully before it outputs test. In the network panel I can also see all the images loading before finally the script executes.

How can I make the script load and execute directly after it was inserted into the document?

Hi, my question is about a dynamically inserted script tag, the question you posted deals with regular script tags. — Andre Brdoch
– Andre Brdoch, Commented Aug 22, 2018 at 12:18
This sounds like an X/Y problem. What are you actually trying to do here? This is a very uncommon scenario... — Jared Smith
– Jared Smith, Commented Aug 22, 2018 at 12:51
I am trying to load an external js file depending on the domain. Eg: domain1.com --> main1.js domain2.com --> main2.js However I need the code to execute as soon as possible, not after rendering. — Andre Brdoch
– Andre Brdoch, Commented Aug 22, 2018 at 12:54
This is most likely the problem: According to developer.mozilla.org/en-US/docs/Web/HTML/Element/…, dynamically inserted scripts are async by default. However, even if I set script.async = false;, the page will still render before the console output appears. — Andre Brdoch
– Andre Brdoch, Commented Aug 22, 2018 at 13:12

Andre Brdoch · Accepted Answer · 2018-08-22 13:34:54Z

4

I found the solution myself. Dynamically inserted scripts are treated as async by default. Setting it to async=false fixed it:

<script>
var script = document.createElement("script");
script.setAttribute("src", "mydomain.com/main.js");
script.setAttribute("async", "false");
var head = document.head;
head.insertBefore(script, head.firstChild);
</script>

answered Aug 22, 2018 at 13:34

Andre Brdoch

2413 silver badges14 bronze badges

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

Comments

Divneet · Accepted Answer · 2018-08-22 12:10:15Z

0

move this script tag to the head of the html. then it should assure you that the script executes before any body is rendered. Also you could add this script to the start of the body tag.

answered Aug 22, 2018 at 12:10

Divneet

7184 silver badges18 bronze badges

1 Comment

Andre Brdoch Over a year ago

Hi, thanks for the reply. It already is at the top of the head. However, it still consoles only after the full page is rendered.

Collectives™ on Stack Overflow

Immediately execute dynamically loaded JS script

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related