JS加载资源失败的解决办法

小火车况且况且

已于 2023-07-27 10:26:29 修改

阅读量2.4k

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2023-07-27 10:10:47 首次发布

本文链接：https://blog.csdn.net/weixin_43972992/article/details/131953770

版权

JavaScript 专栏收录该内容

51 篇文章

订阅专栏

当JS加载出错导致页面异常时，可以监听window的error事件来捕获错误。通过检查触发错误的标签及错误类型，可以针对脚本加载失败的情况执行重试策略。在达到最大重试次数后，可提示用户。这种方法能提高网页的容错性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS加载资源失败的解决办法

原文地址

JS加载失败导致问题

JS 也有可能加载失败，导致页面样式错乱，甚至白屏无法使用。
这对用户体验是非常不利的，尤其是对于单页应用，如果 JS 加载不出来，用户就无法继续浏览页面了。

比如, 网络不稳定，服务器出错，跨域问题、或者资源本身有问题，导致出现了资源加载失败。就会造成后面需要使用的地方出现undefined

在这里插入图片描述

解决办法

通过监听script标签中资源加载出错，从而执行一些自己想要的操作

注意，下面的方法必须写到所有script标签之前，才可以监听到资源加载出错

<script>
	window.addEventListener('error', (event) => {
		console.log(event)
		// 拿到触发错误的标签
		const tag = event.target;
		// 便签的名称必须是 'SCRIPT' 与 event 错误的类型不能是 ErrorEvent
		if (tag.tagName === 'SCRIPT' && !(event instanceof ErrorEvent)) {
			console.log(tag.src, 'script 加载错误');
		}
	}, true)
</script>

<!-- 出错的标签 -->
<script src="https://cdnjs.cloudflare1.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>

在这里插入图片描述

重试

codepen地址

重试的次数根据项目进行自定义，达到指定的重试次数之后，执行其他操作即可

<script>
	// 重试的信息
	const retryInfo = {},
		maxRetryNum = 3
	window.addEventListener('error', (event) => {
		console.log(event)
		// 拿到触发错误的标签
		const tag = event.target;
		// 便签的名称必须是 'SCRIPT' 与 event 错误的类型不能是 ErrorEvent
		if (tag.tagName === 'SCRIPT' && !(event instanceof ErrorEvent)) {
			const url = tag.src;
			console.log(url, 'script 加载错误');
			if (!retryInfo[url]) {
				retryInfo[url] = {
					retryTime: 0
				}
			}
			// 如果重试的次数小于 最大的重试次数，才可以继续重试
			if (retryInfo[url].retryTime < maxRetryNum) {
				// 重试就要生成一个新的元素
				const script = document.createElement('script')
				// 然后将新的 url 添加到新的 script 的 src 里
				script.src = url.toString()
				// 将新的 script 加入到失败的 script 之前
				document.body.insertBefore(script, tag)
				retryInfo[url].retryTime++
			}
			else if(retryInfo[url].retryTime === maxRetryNum) {
				alert("重试次数到了")
			}
		}
	}, true)
</script>

<!-- 出错的标签 -->
<script src="https://cdnjs.cloudflare1.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>