Object inside window is present but undefined when invoked

Question

I dynamically added StripeCheckout script in the DOM like:

var script = document.createElement(`script`);
script.src = `https://checkout.stripe.com/checkout.js`;
document.getElementsByTagName('head')[0].appendChild(script);

When I do console.log(window) I get :

But when I do console.log(window.StripeCheckout) I freaking get an undefined.

Why?

P.S. window.StripeCheckout is present when I accessed it directly from the dev console.

Answer 1

Why?

Because it takes time to load and execute the script. When you log window, by the time you expand the object, the script has loaded and executed. Same for when you run window.StripeCheckout in the developer console.

When you hover over that little [i] in the console it will also tell you that the "content" of the object was just evaluated when you expanded that line.

Additionally, because JavaScript runs to completion, it is guaranteed that console.log(window.StripeCheckout) is executed before the script is evaluated. So the property cannot exist at that moment, even if the script was available immediately.

---

If you want to know when the script loaded have a look at

• Dynamically load external javascript file, and wait for it to load - without using JQuery
• Dynamically load a JavaScript file

Answer 2

Try this:

function loadScript(url, callback){

var script = document.createElement("script")
script.type = "text/javascript";

if (script.readyState){  //IE
    script.onreadystatechange = function(){
        if (script.readyState == "loaded" ||
                script.readyState == "complete"){
            script.onreadystatechange = null;
            callback();
        }
    };
} else {  //Others
    script.onload = function(){
        callback();
    };
}

script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}

loadScript("https://checkout.stripe.com/checkout.js", function(){
  console.log(window.StripeCheckout)
});