In JavaScript how to wait for dynamically injected scripts are loaded before start using them?

Question

Without using any external library how can I wait for a script to load before using it.

In my case I'm loading the scripts using:

(function (w,d,t,s,e,r) {

    e = d.createElement(o);
    r = d.getElementsByTagName(o)[0];
    e.async = 1;
    e.src = g;
    r.parentNode.insertBefore(e, r)

})(window, document, 'script', '//mydomain.com/path/to/script.js');

And later:

// then later I want to use some code form the script:
var obj = new classFromTheInjectedScript();

Is there away to wait for the script to load and then start using it?

Note: I have a way that I can trigger an event within the script I want to load and then listen to it as you can see below, but is this a good idea?

(function(w,d){

    document.addEventListener('scriptLoadedCustomEvent',onScriptReady);

    function onScriptReady(){
        // what I need to do goes here!
    }


})(window,document);

Assuming "without using any external library" includes jQuery, it's worth considering that your homebrew event, while effective, will require you to handle the case wherein the script can't be loaded. I think what you're looking for is a 'promise'. — Jonline
– Jonline, Commented Mar 29, 2016 at 14:46

joe.gonz · Accepted Answer · 2016-03-29 15:00:49Z

10

You should be able to do something like this!

    var script = document.createElement('script');
    script.src = url; //source 

    var callback = function (){ 
      // do stuff after loaded
    }
    script.onload = callback;

    document.head.appendChild(script); //inject where you need it to be

answered Mar 29, 2016 at 15:00

joe.gonz

1595 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mikalai · Accepted Answer · 2016-03-29 14:50:58Z

8

You can use onload and onerror events for <script> tag. Good example here.

answered Mar 29, 2016 at 14:50

Mikalai

1,5258 silver badges21 bronze badges

Comments

Murtaza Hussain · Accepted Answer · 2021-09-27 08:34:11Z

0

Here is a function that would be help to load a script and on successful load.. you can wait and perform your actions

function loadScript(url) {
  const w = window;
  const d = document;
  const l = () => {
    const s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = url;
    const x = d.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);

    s.addEventListener('load', () => {
      // This loads the script
      yourFunctionAfterScriptLoaded();
    });
  };
  if (w.attachEvent) {
    w.attachEvent('onload', l);
  } else {
    w.addEventListener('load', l, false);
  }
}

or you can directly use the script onload function as shown in this link

answered Sep 27, 2021 at 8:34

Murtaza Hussain

4,3631 gold badge30 silver badges31 bronze badges

Comments

Fabio brunori · Accepted Answer · 2016-03-29 14:44:21Z

-2

you could read the file source and inserting it in a script tag manually, so you will have the AJAX response event

answered Mar 29, 2016 at 14:44

Fabio brunori

284 bronze badges

Collectives™ on Stack Overflow

In JavaScript how to wait for dynamically injected scripts are loaded before start using them?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related