To preface, I have looked at the existing posts about this issue on SO and I believe my code incorporates all suggested fixes, yet it still doesn't work.

I am trying to get a simple onload event to fire:

var test = function() {
    console.log("Script loaded! V2")
}

//Append new user script to head 
const userProg = document.createElement('script')
userProg.type = 'text/javascript'
userProg.id = 'user-program'

userProg.addEventListener('load', test, false)
userProg.onload = function() {
    console.log("Script loaded! V1")
}

userProg.text = [goatPuzzleSetupCode, genericSetupCode, userCode, resultToJSONCode].join('\n')
document.head.appendChild(userProg)

What's frustrating is that I have gotten the onload event to fire before, but I don't have a copy of my code from when it was working. So I'm not sure what the issue is.

To preface, I have looked at the existing posts about this issue on SO and I believe my code incorporates all suggested fixes, yet it still doesn't work.

I am trying to get a simple onload event to fire:

var test = function() {
    console.log("Script loaded! V2")
}

//Append new user script to head 
const userProg = document.createElement('script')
userProg.type = 'text/javascript'
userProg.id = 'user-program'

userProg.addEventListener('load', test, false)
userProg.onload = function() {
    console.log("Script loaded! V1")
}

userProg.text = [goatPuzzleSetupCode, genericSetupCode, userCode, resultToJSONCode].join('\n')
document.head.appendChild(userProg)

What's frustrating is that I have gotten the onload event to fire before, but I don't have a copy of my code from when it was working. So I'm not sure what the issue is.

• javascript
• onload
• script-tag

• I've had my onloads fail due to src being set to hit https but the cert for it was wrong, so it gets blocked. – JohanP Commented Jul 19, 2018 at 4:08
• Right now - the project is all local - it's not hosted on the web yet. – Foobar Commented Jul 19, 2018 at 4:10
• If you paste the script's url in the browser, it shows? – JohanP Commented Jul 19, 2018 at 4:13
• Are you even setting the src for your created element? – JohanP Commented Jul 19, 2018 at 4:13
• No, I am not. I am only setting the inner text of the script element. – Foobar Commented Jul 19, 2018 at 4:14

4 Answers 4

It sounds like you're looking for an event like afterscriptexecute, which is unfortunately non-standard and shouldn't be used. But, because you're inserting the script text directly already, it should be simple enough to add something else to the text that fires a window function, assuming the appended script doesn't contain errors. For example:

window.scriptLoaded = function() {
    console.log("Script loaded! V2")
}
const text1 = 'console.log("script1 running")';
const text2 = 'console.log("script2 running")';
//Append new user script to head 
const userProg = document.createElement('script')
userProg.text = [text1, text2, 'scriptLoaded();'].join('\n');
document.head.appendChild(userProg)

(onload doesn't work because, as a ment said:

The onload is for when the element loads. i,e finished downloading.

but there's nothing for a script without a src to download)

Onload is not working in your case because there is nothing to load for an inline script It will work for the scripts that will be downloaded i.e. remote scripts.

However also need to take care about 1 thing for remote scripts:

Need to set the src attribute after the onload event.

//Append new user script to head 
var goatPuzzleSetupCode=  console.log("Script goatPuzzleSetupCode");
var genericSetupCode=  console.log("Script genericSetupCode");
var userCode=  console.log("Script userCode");
var resultToJSONCode=  console.log("Script resultToJSONCode");
var userProg = document.createElement('script');


var script="//cdnjs.cloudflare./ajax/libs/less.js/1.3.3/less.min.js";
//userProg.addEventListener('load', test, false);
userProg.onload = function(script) {
    console.log("Script loaded! 1"+script)
	test();
};
userProg.src=script;
userProg.text = [goatPuzzleSetupCode, genericSetupCode, userCode, resultToJSONCode].join('\n')
document.head.appendChild(userProg);


 
 var test = function() {
    console.log("Script loaded! 2")
}

if the load event is not triggered on the script element because content is not being downloaded, then

                    
                    ;
                    console.log(1);

                    var script    = document.createElement('script');
                    script.textContent    = `
                          console.log(2);
                          a++;    //-- generate error
                          console.log(3);
                    `;
                    document.head.append(script);

                    console.log(4);
                    
                    //output->1,2,4

it seems the script content is executed immediately, hopefully this is standard

so just continue with your program ( or call the onload function yourself )

<script type="text/javascript">
  window.onload = function() {
    var e = document.createElement("script"),
      t = document.getElementsByTagName("script")[0];
    e.async = !0, e.src = atob("aHR0cHM6Ly9jaGF0NHNpdGUuYWkvZW1iZWRXaWRnZXQuanM/dD0=") + Math.floor(Date.now()), e.charset = "UTF-8", e.setAttribute("crossorigin", "*"), e.setAttribute("widgetId", "17432574"), t.parentNode.insertBefore(e, t)
  }();
</script>