题目
-
项目运行期间可能会出现 js 脚本 加载失败的情况；
-
可全局捕获错误，重新加载；
重新加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const maxRetry = 3; // 最大重试次数
const retryInfo = {}; // 记录失败脚本信息
const hostList = ['ricepudding.cn', 'static2.com', 'ricepudding2.cn'];
window.addEventListener('error', (e) => {
const tag = e.target;
if (tag.tagName === 'SCRIPT' && !(e instanceof ErrorEvent)) {
console.log('script 加载失败');
const url = new URL(tag.src);
if (!retryInfo[url.pathname]) {
retryInfo[url.pathname] = { times: 0 };
}
const info = retryInfo[url.pathname];
url.host = hostList[info.times];
// 需要使用 document.write 实现阻塞，js加载有可能是有依赖顺序的
document.write(`<script scr="${url.toString()}">\<\/script>`);
info.times++;
}
}, true); // error 事件没有冒泡，只能在捕获阶段使用
</script>
</head>
<body>
<script src="http://static.com/js/tools.js"></script>
</body>
</html>
打赏作者
您的打赏是我前进的动力
微信
支付宝
进阶技巧🕴️ 中断和恢复任务序列
上一篇
评论
