Question

以下是我在HTML页面中动态包含src脚本标记的代码。我想要使用的新导入的javascript文件中有一个函数：

var scriptFile= document.createElement("script");
scriptFile.src = "something.js";
var something=document.body.appendChild(scriptFile);

something.js包含一个名为doSomething()的函数。现在，当我在上面的appendChild之后立即调用此函数时，它说doSomething未定义。但是，当我从Chrome控制台启动它时，它会成功执行。我不确定为什么会这样。

Answer 1

当您使用源附加script标记时，首先将解析和编译源，这是一个asyn进程（非阻塞）。

如果您尝试立即调用该方法，则会因为尚未编译源而引发错误。

绑定在脚本可用时触发的load事件。这将确保您在脚本标记完全加载后才运行脚本标记的内容。

var scriptFile= document.createElement("script");

scriptFile.addEventListener('load', function() {
    console.log('Script is ready to execute');

    // invoke your function here
}); 

scriptFile.src = "something.js";
var something=document.body.appendChild(scriptFile);

Answer 2

倾听onload

var scriptFile= document.createElement("script")
scriptFile.src = "something.js"
document.body.appendChild(scriptFile)
scriptFile.onload = () => {
   // call something.js functions here
}

document.body.appendChild（scriptElement）之后的函数不可用

2 个答案: