Trying to Fire the Onload Event on Script Tag

Trying to fire the onload event on script tag

You should set the src attribute after the onload event, f.ex:

el.onload = function() { //...
el.src = script;

You should also append the script to the DOM before attaching the onload event:

$body.append(el);
el.onload = function() { //...
el.src = script;

Remember that you need to check readystate for IE support. If you are using jQuery, you can also try the getScript() method: http://api.jquery.com/jQuery.getScript/

How to make Chrome fire the load/onload event on a script tag without jQuery

Im using somting like this in script and it works ok.

const url = `https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js`
const script = document.createElement('script');
script.async = true;
script.onload = () => console.log("script loaded")
script.src = url;
document.head.appendChild(script)

onload event in script tag not firing

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 event is not firing

Something like that

<!DOCTYPE html><html>
<head>
</head>
<body>  <script type="application/javascript">    var el = document.createElement('script');    el.src = "//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js"; // use what ever js file you want but valid one    el.onload = function(script) {      console.log(script + ' loaded!');    };
    document.body.append(el);  </script></body>
</html>

Fire onload event when script is loaded

Try This Code

jQuery.loadScript = function (url, callback) {
   jQuery.ajax({
      url: url,
      dataType: 'script',
      success: callback,
      async: true
   });
}

$.loadScript('dynamicJavascriptUrl.js', function(){
    console.log('hello');
});

When does onload fire for async script?

Onload EventHandler Supports these HTML tags: <body>, <frame> (deprecated), <iframe>, <img>, <input type="image">, <link>, <script>, <style>, <track>, <svg>, <use>, <foreignObject>, <image>, <object>, <embed. (Merci to @Kaiido for completing this list.)

If you want to be sure that your JS only runs when the DOM is loaded, you can load a handler function from the body tag.

Note You need to know when using onload with async that when scripts are loaded asynchronously, they delay the onload event. Often, asynchronously loaded scripts load other scripts.

function start() {
  gapiLoad();
  gisInit();
}

function gapiLoad() {
  console.log(1)
  // do something 
}

function gisInit() {
  console.log(2)
  // do something 
}
    
    // there are other stuffs...

<head>
<script async defer src="https://apis.google.com/js/api.js" ></script>
<script async defer src="https://accounts.google.com/gsi/client"></script>
</head>

<body onload="start()">

Why is my HTML onload event attribute ignored in the script element?

On an element, the load event fires if the element requires a resource, once that resource has loaded. This applies to, for example, images and <script> tags which use separate files. Inline JavaScript tags do not require the downloading of resources, so they don't fire the load event: so, the

<script onload="popup()">

doesn't invoke popup.

Just run popup() in the plain script body:

<script>
    function popup() {
      console.log('popup function has been triggered!!!');
    }
    popup();
  </script>

Trying to Fire the Onload Event on Script Tag