Question

我正在使用以下代码在html页面中动态加载脚本（因为在投放该页面之前我不知道该网址）：

let script = document.createElement('script');
                script.src = 'https://foo/bar/myscript.js';
                script.async = false;
                script.defer = false;
                document.head.appendChild(script);

                //Try to use a global function defined in the script:
                myFun(); //This raises "undefined" error

遵循以下建议： https://stackoverflow.com/a/7308984/300741 我将async和defer属性设置为false，以确保在尝试使用脚本之前将其加载。但是，正如您从代码的最后一行的注释中看到的那样，这是行不通的。

我在这里想念什么？请注意，如果我使用setTimeout()稍等一下再调用myFun()，它会按预期工作，因此绝对是异步/延迟加载问题...但是如何解决？（顺便使用Chrome）

Answer 1

让我们尝试了解发生了什么。您的Javascript代码尝试从服务器加载文件。文件加载不是一项快速操作，尤其是在运行Web浏览器的客户端计算机离服务器很远且请求必须经过各种计算机的情况下。您的Javascript代码不会等待脚本。相反，它将连续运行，并且在成功下载脚本后将加载该脚本。因此，您可以使用在负载下运行的callback，如下所示：

let script = document.createElement('script');
                script.src = 'https://foo/bar/myscript.js';
                script.async = false;
                script.defer = false;
                document.head.appendChild(script);

                script.onload = function() {
                    myFun();
                };

这将确保在要加载的脚本执行之后要执行的代码之前加载脚本。

Answer 2

您可以在脚本onload事件中调用该函数

let script = document.createElement('script');
script.async = false;
script.defer = false;
document.head.appendChild(script);

script.onload = function(){
  // script is loaded
  myFun();
}

script.src = 'https://foo/bar/myscript.js';

Javascript：等待动态加载的脚本准备就绪

2 个答案: