JavaScript ES6 Dynamically load class and check if it was loaded?

Question

I am trying to load a class dynamicly and check if it was loaded before.
the code below is not working, any idea why?

I am unable to understand why is this part not working:

if (typeof window['Car'] == 'undefined')

full source:

if (typeof window['Car'] == 'undefined') {
    alert("Car class not loaded!");
   }
      
var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');
script.src = 'http://m.uploadedit.com/bbtc/1572125047736.txt';
script.type = 'text/javascript';

head.append(script);
      
 setTimeout(function(){
           if (typeof window['Car'] == 'undefined') {
          alert("Even After X seconds, Car class not loaded!");
        }else{
          alert("After X seconds, Car class loaded!");
        } 

  }, 3000);
       

Update I am adding the solution source here, just in case the fiddle is lost:

function testClass(cls) {
  return eval("typeof " + cls + " === 'function'");
}


if (!testClass('Car')) {
        console.log("Car class not loaded when starting as expected!");
}

var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');
script.src = 'http://m.uploadedit.com/bbtc/1572125047736.txt';
script.type = 'text/javascript';

head.append(script);

 setTimeout(function(){
           if (!testClass('Car')) {
          alert("Even After X seconds, Car class not loaded!");
        }else{
          alert("After X seconds, Car class loaded!");
        } 

  }, 3000);

And this url (http://m.uploadedit.com/bbtc/1572125047736.txt) contains a simple class:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}

Answer 1

Inserting a script dynamically like you are runs the script asynchronously so you are checking for the loaded class BEFORE the dynamically loaded script has finished loading and then executed.

You can use script.onload to find out when the script has finished loading and THEN check to see if your class is present in that callback.

In addition, class constructors are not added to the window object so you have to change how you test for its existence as shown below.

var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');
script.src = 'http://m.uploadedit.com/bbtc/1572125047736.txt';
script.type = 'text/javascript';
script.onload = function() {
    if (typeof Car === "function") {
        alert("Car class loaded!");
    } else {
         alert("Car class not loaded!");
    }
}

head.append(script);

Working demo here: http://jsfiddle.net/v6hay9nb/4/

---

If you want to be able store the class name you're testing for in a variable, you can do it like this:

function testClass(cls) {
  return eval("typeof " + cls + " === 'function'");
}

var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');
script.src = 'http://m.uploadedit.com/bbtc/1572125047736.txt';
script.type = 'text/javascript';
script.onload = function() {
  let cls = "Car"
  if (testClass(cls)) {
    alert("Car class loaded!");
  } else {
    alert("Car class not loaded!");
  }
}

head.append(script);

Working demo here: http://jsfiddle.net/jfriend00/9q7yo645/4/

Note: These working demos have to be accessed via http:// because they are trying to load a script provided by the OP that is only available http://. As such, they can't be shown here as stackoverflow snippets (which require https:// for script resources). That's why they're using jsFiddle demos.

Answer 2

Four things! Your code might be ok, this is more server related.

---

Your file is of mime type text/plain. It should be text/javascript or application/javascript.

curl -I  "http://m.uploadedit.com/bbtc/1572125047736.txt"

HTTP/1.1 200 OK

Content-Length: 162

Content-Type: text/plain

Last-Modified: Sat, 26 Oct 2019 21:24:07 GMT

---

Your file is served over http and not https. Browsers might block while your page is served as https with the error blocked mixed content!

If your website delivers HTTPS pages, all active mixed content delivered via HTTP on this pages will be blocked by default. Consequently, your website may appear broken to users

---

Your file doesn't offer a CORS header. If your page is running on https, your browser is blocking:

fetch("http://m.uploadedit.com/bbtc/1572125047736.txt")

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://m.uploadedit.com/bbtc/1572125047736.txt. (Reason: CORS request did not succeed).

Test CORS online

---

Dynamic module import landed in Firefox 67+!

(async () => {
   await import('//.../synth/BubbleSynth.js')
})()

With error handling:

(async () => {
    await import('//.../synth/BubbleSynth.js').catch((error) => console.log('Loading failed' + error))
})()

https://caniuse.com/#feat=es6-module-dynamic-import