在前端开发中，我们可能会遇到需要使用 <script>标签加载站外js脚本的需求，而由于网络原因、服务器原因等，有一定几率遭遇脚本加载失败的情况，此次我们编写一段简单的代码来解决js脚本的失败重试情景。
<html>
<head>
<script>
// 脚本备用资源地址
const domains = ['a.xxx.com', 'b.xxx.com', 'c.xxx.com']
const retry = {}
window.addEventListener(
'error',
(e) => {
if (e.target.tagName !== 'SCRIPT' || e instanceof ErrorEvent) return
const url = new URL(e.target.src)
const key = url.pathname
if (!key in retry) {
retry[key] = 0
}
const index = retry[key]
const domain = domains[index]
url.host = domain
// 重试新地址脚本
/* 若该脚本资源被别的资源利用，需阻塞浏览器的解析 */
document.write(`\<script src="${url.toString()}">\<\/script>`)
/* 若没有被利用 */
// const script = document.createElement('script')
// script.src = url.toString()
// document.body.insertBefore(script, e.target)
retry[key]++
},
true
)
</script>
</head>
<body>
<script src="xxx.com/test.js"></script>
</body>
</html>
评论区