Dynamically loading a JavaScript file

programming
1

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.

2

Hi Kleber! Welcome to the forums :wink:

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?

3

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

4

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?

5

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

6

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.

7

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

8

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?

9

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