我有一个远程加载js文件的脚本，有没有办法让它重试\等待错误

Question

这是我得到的脚本：

loadScriptFromUrl = function(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = false;
script._url = url;
document.body.appendChild(script); 
};

有没有一种方法可以让它等待脚本加载？如果url返回错误，请稍后重试加载？(有时远程heroku服务器空闲，所以它返回错误，我不得不再次启动它(

Answer 1

如果您想检查脚本是否已加载，可以通过添加script.onload=function(){...}来完成。

必须注意 '-script.onload必须在script.src 之前

您的代码，带有加载功能

loadScriptFromUrl = function(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
document.body.appendChild(script); 
script.onload=()=>{
console.log("script loaded")
//whatever you want to do
}
script.async = false;
script.src = url;
script._url = url;
};

如果你想在加载时检查任何错误，你可以使用script.onerror=function(){...}

它也将出现在script.src 之前

loadScriptFromUrl = function(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
document.body.appendChild(script); 
script.onerror=()=>{
console.log("script not loaded")
//reload script like below
loadScriptFromUrl(url);
//or reload the whole window by location.reload() method
}
script.async = false;
script.src = url;
script._url = url;
};

如果你想等到函数加载脚本，你可以把这个函数放在异步函数下，在它之前添加away关键字，并在script.onload((下返回promise解析；

例如

async function parentFunct(){
loadScriptFromUrl =await function(url) {
return new Promise((resolve,reject)=>{
var script = document.createElement('script');
script.type = 'text/javascript';
document.body.appendChild(script); 
script.onload=()=>{
console.log("script loaded")
resolve();
}
script.async = false;
script.src = url;
script._url = url;
})
};
}

上面的代码将停止parentFunc((中的所有内容，直到加载脚本为止阅读更多关于js承诺的信息https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await