Question

我在DOM中动态添加了StripeCheckout脚本，如：

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

当我console.log(window)时，我得到：

但是当我做console.log(window.StripeCheckout)时，我吓坏了undefined。

为什么呢？

P.S。当我直接从开发控制台访问它时，window.StripeCheckout存在。

Answer 1

为什么？

因为加载和执行脚本需要时间。当您记录window时，在展开对象时，脚本已加载并执行。在开发人员控制台中运行window.StripeCheckout时也是如此。

当您将鼠标悬停在控制台中的小[i]上时，它还会告诉您＆＃34;内容＆＃34;扩展该行时，对象的只是评估。

此外，因为JavaScript runs to completion，所以可以保证在评估脚本之前执行console.log(window.StripeCheckout)。因此，即使脚本立即可用，该属性也不会存在。

如果您想知道加载的脚本何时查看

Answer 2

试试这个：

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)
});

窗口内的对象存在但在调用时未定义

2 个答案: