addEventListener load for Dynamically Loaded Script

programming
1

I want to modify css of the container that loaded from dynamic script
I tried to use
myScript.addEventListener(“load”, scriptLoaded, false); but it is getting null values.

2

Can you provide a more complete (yet still as simple as possible) example of what you’re talking about?

3

Thank you for your quick response.
Yo can check the JS code here: https://codepen.io/Shrradhaa/pen/XWdVQYe?editors=1111
I added this script in my component. I can see the load function in console but didn’t get the values.
I want to modify the background of popup which is loading from dynamic script.

4

Your timing for loading the script is fine, but that script does not provide what you’re looking for right away. If there’s some API provided by that script that allows you to know when its done doing whatever it does, use that. Or if you’re just interested in styling a background, create a CSS file that will target that background automatically when it appears.

5

Yes, you are right.
But I believe here load is in async.
Is there any event from which we can identify the complete loading of dynamic script?

6

You can listen to the load event. This tutorial goes into more detail: https://www.kirupa.com/html5/loading_script_files_dynamically.htm

let myScript = document.createElement("script");
myScript.setAttribute("src", "https://www.example.com/foo.js");
document.body.appendChild(myScript);

myScript.addEventListener("load", scriptLoaded, false);

function scriptLoaded() {
  console.log("Script is ready to rock and roll!");
}

:slight_smile: