# Dynamically loading a JavaScript file

**URL:** https://forum.kirupa.com/t/dynamically-loading-a-javascript-file/647878
**Category:** programming
**Created:** [June 10, 2021, 5:03pm UTC](https://forum.kirupa.com/t/dynamically-loading-a-javascript-file/647878 "2021-06-10T17:03:16Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![payback](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/payback/32/20328_2.png) [@payback](https://forum.kirupa.com/u/payback)
#### Post date: [June 10, 2021, 5:03pm UTC](https://forum.kirupa.com/t/dynamically-loading-a-javascript-file/647878/1 "2021-06-10T17:03:16Z")

</div>

Hello Gentlemen,

My name is kleber and I’m in Brazil.  
My OS is windows 10 and I’m working with Edge.  
I’m testing a routine to dynamically load a javascript file and  
I have the following problem :

- Apparently the script is loaded on first run.
- When trying to execute a function declared in the loaded javascript,  
immediately after loading , I see an error message  
on the console that the requested function does not exist.
- When trying to perform the same function for the second time and using the same process, it runs successfully.

After several changes and unsuccessful attempts , the impression that remains is that the script is loaded on the first run , however , the functions  
contained therein are not available for immediate execution.

Does anyone know why it’s not running the first time?

Note - This text was translated by google

function load\_javascript(url) {  
let myScript = document.createElement(“script”);  
myScript.setAttribute(“src”, url);  
document.body.appendChild(myScript);  
myScript.addEventListener(“load”, scriptLoaded(url), false);  
}  
function scriptLoaded(url) {  
console.log(“Script " + url + " was dynamically loaded!!!”);  
}

Thank you for your attention.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 10, 2021, 5:05pm UTC](https://forum.kirupa.com/t/dynamically-loading-a-javascript-file/647878/2 "2021-06-10T17:05:23Z")

</div>

Hi Kleber! Welcome to the forums 😉

That is an interesting problem. In your `console.log` in `scriptLoaded`, if you try to access any function contained by the loaded script, does that code run correctly?

---

<div class="post-metadata">

### Author: ![payback](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/payback/32/20328_2.png) [@payback](https://forum.kirupa.com/u/payback)
#### Post date: [June 10, 2021, 5:21pm UTC](https://forum.kirupa.com/t/dynamically-loading-a-javascript-file/647878/3 "2021-06-10T17:21:01Z")

</div>

Yes.  
The functions contained in the loaded script are working correctly as I currently run them without dynamic loading.  
As there are several scripts to be executed, I’m trying to load them on demand.  
Note - this text was translated by google

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 10, 2021, 5:26pm UTC](https://forum.kirupa.com/t/dynamically-loading-a-javascript-file/647878/4 "2021-06-10T17:26:00Z")

</div>

If that is the case, then it is very likely the code you are running gets run before the script file containing it has fully loaded. Do you have a link to the URL where I can see all of this live?

---

<div class="post-metadata">

### Author: ![payback](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/payback/32/20328_2.png) [@payback](https://forum.kirupa.com/u/payback)
#### Post date: [June 10, 2021, 7:17pm UTC](https://forum.kirupa.com/t/dynamically-loading-a-javascript-file/647878/5 "2021-06-10T19:17:13Z")

</div>

I’ll try to prepare an analogous situation and you  
I will send the link.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 10, 2021, 7:24pm UTC](https://forum.kirupa.com/t/dynamically-loading-a-javascript-file/647878/6 "2021-06-10T19:24:38Z")

</div>

Thanks! That would be helpful. Diagnosing issues like this is often tricky, for there is something really subtle going on that would require me to step through the code to see what exactly is happening.

---

<div class="post-metadata">

### Author: ![payback](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/payback/32/20328_2.png) [@payback](https://forum.kirupa.com/u/payback)
#### Post date: [June 10, 2021, 10:04pm UTC](https://forum.kirupa.com/t/dynamically-loading-a-javascript-file/647878/7 "2021-06-10T22:04:54Z")

</div>

Hello sir ,

Initially, I want to thank you for your attention for answering me.  
My scenario is complex and I’m having difficulties  
create a simulation routine for analysis.  
I’m doing offline testing because I don’t have this environment  
systematized dynamic loading.

Basically I’m implementing voice command in my systemic environment and I need to synchronize mouse and/or voice operations.

The reported problem only occurs when the user operates with voice because I launch an operational function (for example, a screen to register a company) within the script to be dynamically loaded.

The user, when operating with mouse , this screen is initialized by the instruction location.href which is not inside the javascript file to be loaded.  
In this case, the file will only start running after it has been loaded and is working correctly.

The conclusion is that windows does not wait for loading  
of the javascript file through the instruction  
myScript.addEventListener(“load”, scriptLoaded(url), false)  
reason why in the first run it has an error on the console.

The need to perform dynamic loading is due to the fact that I have to include more than 80 javascript files in the control file that centralizes and coordinates these operations (mouse and voice)

I changed this control file to also perform the initialization of an operational function like the mouse (not depending on the loading of the javascript file) and it started to work correctly and in a synchronized way (mouse and voice).

After performing several successful tests , I was left with the following question :  
When executing the same function several times, I checked in the system console the message of success in its loading for each execution.  
Does this mean that windows loads cumulatively, ie includes the same javascript file several times or is this inclusion eliminated when closing a function or section of the system?

For example, the user activates a function to register company, then activates another function to register branch, then goes back to company function to perform a query.  
In this example , on the system console , you will see two business entity load messages.

Once again thank you for your attention.

Note - This text was translated by google

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 11, 2021, 6:14am UTC](https://forum.kirupa.com/t/dynamically-loading-a-javascript-file/647878/8 "2021-06-11T06:14:15Z")

</div>

That behavior seems correct. The code will run every time the script element is created and added to the DOM. The extra network request won’t happen in subsequent calls, but that doesn’t solve.

You should ensure it gets added only once to the DOM. Would you like me to provide an example of that?

---

<div class="post-metadata">

### Author: ![payback](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/payback/32/20328_2.png) [@payback](https://forum.kirupa.com/u/payback)
#### Post date: [June 11, 2021, 3:12pm UTC](https://forum.kirupa.com/t/dynamically-loading-a-javascript-file/647878/9 "2021-06-11T15:12:10Z")

</div>

Hello sir ,

About the doubt in the last statement regarding the  
windows treatment in javascript loading, after performing several tests, concludes that it is cumulative, that is, windows loads the same javascript file several times.  
I wrote a control routine to not allow this redundancy , that is , a single load is enough to process a user return to a function  
which has already been requested.  
Note - In my case , I work with iframe structure , and the  
loading is performed by a permanent window ( it never resets )

Once again thank you for your attention.

Note - This text was translated by google
