Js head Append script

Question

While appending a script tag programmatically after the head element,

head.appendChild(script_elm);

within this above script element, i am defining a variable. If i want to access the variable which is defining within the script tag, it does not work immediately after the head append. Why?

• DanieleAlessandra: If you are loading an external JavaScript file you must wait it to be fully loaded before accessing to variables.
• Daut: Possible duplicate of Call javascript function after script is loaded

Answer 1

You need to wait for the script to be loaded. as @DanieleAlessandra comments

 script_elem.onload = function() {
 // some code
 };

see this question

Call javascript function after script is loaded

• BRO_THOM: Personally I would never "wait" for a single piece of script to load a single variable. I would suggest either using an ajax call to request the variable, or use a serversided preprocessor (like PHP) or simply include the script in the head and wait for the DOMContentLoaded event.

Answer 2

Be sure to make access to that variable available through your script. For example, external-script.js

window.externalScript = function () {
 const yourVariable = //do some magic here;
 this.scriptVariable = yourVariable;
 // your code
}

Then you can use this variable in your onload function like so:

script_elem.onload = () => {
 if (window.externalScript &&
 window.externalScript().scriptVariable) {
 //do whatever you want to do with your script variable.
 }
}