【前端基础】script引入资源脚本加载失败解决方案(重新加载获取备用资源)

问题描述

现在假设有一个script资源加载失败,代码如下

<!DOCTYPE html>
<html>
<head>
	<title>script 资源加载失败</title>
</head>
<body>
	<script src="http:hdh.sdas.asdas/1.js"></script>
</body>
</html>

我们希望在加载失败的时候进行一系列的解决操作,那么就需要有两步操作:

  1. 捕获加载失败事件
  2. 对加载失败操作进行处理(重新获取重试)

捕获加载失败事件

注意:
这里既然是捕获 script 资源加载错误,就要在 script 资源加载之前注册监听事件。因此把这段代码放在所有 script 标签之前

全局监听错误事件

在这里插入图片描述

true: 是一个可选的参数,表示在捕获阶段触发事件处理程序。在事件传播过程中,捕获阶段是指从最外层的元素向目标元素的阶段。这里设置为true表示在捕获阶段触发处理程序,如果设置为false或省略,则在冒泡阶段触发处理程序(从目标元素向最外层的元素)。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<title>script 资源加载失败</title>
	<script type="text/javascript">
		<!-- 这里需要添加 true 属性 -->
		window.addEventListener('error',(e)=>{
			console.log('有错误')
		},true)
	</script>
</head>
<body>
	<script src="http:hdh.sdas.asdas/1.js"></script>
</body>
</html>

捕获资源加载失败类型错误

首先我们打印一下监听事件的 e 元素,会发现 script 加载失败事件的属性和别的错误属性有两个特征,只要把握住这两个特征就可以进行判断处理:

  1. 特点1:是个 Event 对象
  2. 特点2:target 属性为 script

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>script 资源加载失败</title>
	<script type="text/javascript">
		<!-- 这里需要添加 true 属性 -->
		window.addEventListener('error',(e)=>{
			const tag = e.target
			// 添加判断事件类型
			if(tag.tagName === 'SCRIPT' && !(e instanceof ErrorEvent)){
				console.log('有错误')
			}
		},true)
	</script>
</head>
<body>
	<script src="http:hdh.sdas.asdas/1.js"></script>
</body>
</html>

完整案例代码

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>script 资源加载失败</title>
	<script type="text/javascript">

		// 这里是模拟的一些备用域名
		const domains = [
			'test.1.com',
			'test.2.com',
			'test.3.com'
		]
		// 最大的重试次数
		const maxRetry = 5
		// 资源加载信息
		const retryInfo = {}

		window.addEventListener('error',(e)=>{

			console.log('e',e)
			const tag = e.target

			// 只对 script 加载失败错误进行处理
			if(tag.tagName === 'SCRIPT' && !(e instanceof ErrorEvent)){
				const url = new URL(tag.src)
				console.log('url',url)

				// 如果该文件没有加载失败信息,则初始化
				if(!retryInfo[url.pathname]){
					retryInfo[url.pathname] = {
						times:0,
						nextIndex:0
					}
				}

				const info = retryInfo[url.pathname]
				console.log('info',retryInfo)

				// 加载失败次数小于最大重试次数
				if(info.times < maxRetry){
					url.host = domains[info.nextIndex]

					// 阻塞页面后续的加载
					document.write(`<script src="${url.toString()}">\<\/script>`)

					// 以下这种方式就不会按顺序加载 script 内容
					// const script = document.createElement('script')
					// script.src = url.toString()
					// document.body.insertBefore(script,tag)

					// 下标循环
					info.nextIndex = (info.nextIndex + 1) % domains.length
					info.times++
				}
			}
		},true)
	</script>
</head>
<body>
	<!-- 模拟一个加载失败的资源 -->
	<script src="http:hdh.sdas.asdas/1.js"></script>
</body>
</html>
  • 16
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值