1

I have an abstract script, any-script.js. It is included it into the html, or it is loading if it is needed. I have some code which calls some some other code, which calls function from loaded script. How can I check this script to know if it loaded 100% and executed? I don't know what code will be called, it is just some abstract callback. If I load this script dynamically, all goes fine, I can add an event lister and to wait until it fires script.addEventLister("load"). But if my script is already in DOM with async attribute, and if it is loaded, I can't just add some evet listener, because it will not fire. At other side I can't to be sure, that the script was loaded. Because script tag in dom !== script is loaded.

  1. script.addEventLister("load") - is working only if you 100% know, that the script is not loaded
  2. script tag in dom !== script is loaded

May be exists some browser api to correctly check this?

Profesor08
  • 1,181
  • 1
  • 13
  • 20
  • the load event listener is usually added on a scripts element built dynamically. Anyway if you want to quickly circumvent the fact that it may have been fired before you even added the event listener, try to add the onload attribute on your ` – Diego D Jan 09 '23 at 09:15
  • 2
    Another way to do it is check for functions or variables that exist only after that script has loaded. For example `if (window.functionFromScript) {console.log("loaded")}` – Kokodoko Jan 09 '23 at 09:22
  • Usually you'd have the `any-script.js` itself include the logic for that, like Google Tag Manager and other services do it. One example is to have outer code initialize a global variable as array if not yet existing and then call `.push` with a callback. The `any-script.js` code would then check if the array exists and call all callbacks inside and then also replace it with an object `{ push: fn => fn() }` so that anybody calling `push` _after_ the script was loaded would immediately get the callback executed. – CherryDT Jan 09 '23 at 10:34
  • Does this answer your question? [Verify External Script Is Loaded](https://stackoverflow.com/questions/9521298/verify-external-script-is-loaded) – Neha Soni Jan 09 '23 at 10:34
  • @DiegoD `onload` attribute can help, but this approach will split logic across different code parts and will make it difficult to maintain. It is very difficult to support and debug such things. – Profesor08 Jan 09 '23 at 11:12
  • @Kokodoko it will work if you know that is exporting from script and you have full control. If script is bundled and not exporting anything, this will not work. – Profesor08 Jan 09 '23 at 11:14
  • You mean you're loading a complete bundle from a separate project, without control over how it was bundled? How do you access the variables and functions that are inside that bundle? – Kokodoko Jan 09 '23 at 12:55
  • Think about it as an API to provide safe way to execute custom code which depends on some script. `run("script.js", () => {cool_code..})` – Profesor08 Jan 10 '23 at 13:10

2 Answers2

0

I have a little snippet I'm using sometimes to check if a function is ready. So to know if your js is loaded you just test 1 of its function. Not the cleanest but that can work...

function fireWhenReady(function1, callback) {
    if (typeof function1 != 'undefined') {
        if (callback && typeof (callback) === "function") {
            callback();
        }
    } else {
        setTimeout(fireWhenReady, 100);
    }
}

//call
fireWhenReady(NAME OF YOU FUNCTION, function () {
   // function is ready
});
pier farrugia
  • 1,520
  • 2
  • 2
  • 9
  • 1. I don't know nothing about global exports in script. It is an any abstract script you can imagine. 2. What will happen if I will make hundreds of calls and script will not load by some reason? Or it src attribut is not assigned yet? Any way brute forcing is not acceptable. – Profesor08 Jan 09 '23 at 11:04
  • I understand. Yes with complementary information in your comment, not a good idea to use this script. sorry – pier farrugia Jan 09 '23 at 13:08
0

Currently there is no official API to check this. But there are some approaches to achieve this.

  • If script is loaded dinamicaly, you have to add an load event listener script.addEventListener("load", event => ...)
  • If script is already in DOM, it must have an attribute onload, to track loading state and to write somhere globaly this info.
  • If script is already in DOM, you can remove it from DOM and load it dimaicaly one more time (shit way), using first variant.

How to maintain this it is only your brain fu..

May be in the future we will have some more consistent way.

Profesor08
  • 1,181
  • 1
  • 13
  • 20