网页文件加载失败如何重试 网页文件加载失败如何重试页面
qiyuwang 2024-11-05 12:19 28 浏览 0 评论
本文由 ChatMoney团队出品
在我们开发网站应用时，我们可能会遇到脚本加载失败的情况，导致脚本加载失败的原因有很多，比如用户的网络问题、终端设备问题、用户浏览器版本等诸多因素。
解决方案
在 JavaScript 中，我们可以创建一个监听来监听脚本加载失败的情况，然后针对加载失败的脚本进行重新加载。
重新加载的方案，一般是通过更换域名来解决。我们给每个脚本添加一个映射关系表，用来在加载失败时匹配新的域名进行重试。
具体的解决方案，下面我一步一步讲解，另外希望大家可以仔细阅读注释中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>脚本加载失败如何重试</title>
<script>
window.addEventListener(
"error", // 监听全局错误
function (e) {
console.log(e);
},
true // 由于脚本加载失败不会冒泡，所以我们要在捕获阶段进行监听
);
</script>
</head>
<body>
<script src="https://www.zowlsat.com/api/1.js"></script>
<script src="https://www.qqqqqqq.com/api/2.js"></script>
<script src="https://www.zowlsat.com/api/3.js"></script>
</body>
</html>此时我们可以在浏览器控制台看到以下效果
但是这个监听方法会监听到很多其他的错误，我们只需要监听脚本加载失败的错误，所以我们要通过这个监听事件的参数 e 来判断了
根据上图我们可以发现，普通错误的类型是 ErrorEvent，而脚本加载失败的类型是 Event，并且他的 target 会指向 script 标签，所以我们根据这个区别过滤掉其他的错误，这样剩下的情况才是我们需要处理的。
window.addEventListener(
"error",
function (e) {
if (e.target.tagName !== "SCRIPT" || e instanceof ErrorEvent) return;
console.log(e);
},
true
);接下来就是如何来实现重新加载，我们先给需要重新加载的域名建立一个映射关系，用于替换映射关系表中的域名。然后就是挨个匹配，当还是加载失败时继续匹配下一个，直到成功为止。
const domainList = ["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"];
const retry = {};
window.addEventListener(
"error",
function (e) {
if (e.target.tagName !== "SCRIPT" || e instanceof ErrorEvent) return;
// 创建一个URL对象
const url = new URL(e.target.src);
// 获取文件路径
const key = url.pathname;
// 假如映射表中没有这个文件路径，那么就初始化一个映射键
if (!(key in retry)) {
retry[key] = 0;
}
// 假如匹配完整个映射表都没重新加载成功，则放弃
const index = retry[key];
if (index >= domainList.length) {
return;
}
// 获取新的完整路径
const domain = domainList[index];
// 替换域名
url.host = domain;
// 创建新的script标签
const script = document.createElement("script");
script.src = url.toString();
// 将新的script标签追加到加载失败的script标签之前
document.body.insertBefore(script, e.target);
retry[key]++;
},
true // 由于脚本加载失败不会冒泡，所以我们要在捕获阶段进行监听
);到此为止，我们功能已经基本实现，效果如下图
但是有一个很关键的问题，就是假如我 2.js 这个文件中的内容，在 3.js 中要使用，那这样的话，2.js 就必须加载到 3.js 之前，否则就会报错。此时，我们就需要在 2.js 加载失败时，阻塞浏览器的解析，知道重新加载完成或者放弃重新加载时，再继续渲染之后的内容。
那这样的话我们该怎么做呢？
其实很简单，在我们入门 js 时就学到过一个知识点，就是使用document.write
document.write这个方法在解析期间使用的话，会阻塞浏览器的解析，而我们现在就是需要阻塞浏览器解析，那此时我们只需要将创建 script 标签的方法更换为document.write方法即可。
修改之后的代码如下：
const domainList = ["www.aaaaa.com", "www.bbbbb.com", "www.zowlsat.com"];
const retry = {};
window.addEventListener(
"error",
function (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];
if (index >= domainList.length) {
return;
}
const domain = domainList[index];
url.host = domain;
// 此处加上转译是因为防止编译器识别script标签为结束标签报错
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
);现在我们再打开控制台查看，现在js文件按它原来的顺序执行了，这样既不会改变原有的代码逻辑，又可以在可控范围内进行重新加载。
效果如下图：
以上是简单实现了一个js文件重新加载错误的方案，其实这个方案也可以运用到其他很多类型的文件，不限于js文件。
然后我们还需要更加细化这个方法的话，我们可能还需要考虑到这个script标签是否带有async、defer等属性，还有诸多需要考虑的点，但是沿着这个方向解决的话，大体是没有问题的。
关于我们
本文由ChatMoney团队出品，ChatMoney专注于AI应用落地与变现，我们提供全套、持续更新的AI源码系统与可执行的变现方案，致力于帮助更多人利用AI来变现，欢迎进入ChatMoney获取更多AI变现方案！
相关推荐
- windows开启telnet服务，检测远程服务端口是否可以连通
-
本文介绍windwos开启telnet服务，telnet服务一般可以用于检测远程主机的某个端口服务是否可以连通，在日常的工作中，我们经常会遇到在本地的windows检测远程服务端口是否可以连通。win...
- 仅在Web登录新华三交换机条件下启用设备Telnet登录方式
-
概述Web登录新华三交换机可以在“网络-服务”页面中启用设备Telnet服务或SSH服务，也可以在“设备-管理员”设置管理员用户的可用服务，然而，在设备Web页面中，无法设置lineVTY用户线【l...
- 思科交换机，路由器如何关闭telnet 开启ssh服务
-
SSH为建立在应用层基础上的安全协议。SSH是目前较可靠，专为远程登录会话和其他网络服务提供安全性的协议。利用SSH协议可以有效防止远程管理过程中的信息泄露问题。今天我们就来说说思科交换机，路...
- 智能化弱电行业常用的DOS命令，掌握了你也能成为...
-
前言在做智能化弱电项目时，前端摄像头设备安装结束后，我们会对网络摄像头进行调试，调试过程中会遇到前端摄像头没有图像或者图像出来了画面卡顿的现象。我们会采用ping命令来测试网络的连通性和网络承载能力。...
- 「干货」eNSP模拟器之配置Telnet登录
-
配置说明：配置Telnet，使R2（模拟PC）通过SW1登录到R1进行管理和配置。操作步骤：system-view##进入系统视图[Huawei]sysnameR1##改名为R1[R1]int...
- win11开启telnet服务怎么操作 win11打开telent指令是什么
-
telnet服务是我们在进行远程连接的时候，必须要打开的一项功能。但是有不少用户们不清楚在windows11系统中怎么开启telnet服务。今天小编就使用详细的图文教程，来给大家说明一下打开telen...
- 华三(H3C)交换机Telnet的远程登陆
-
一，配置交换机管理IP[SW1]vlan20//创建管理vlan[SW1]interfacevlan20//进入vlan接口[SW1-Vlanif20]ipaddress192.168....
- win10 telnet命令怎么查看端口是否打开
-
可能大家也会遇到这个问题，win10telnet命令查看端口是否打开的步骤是什么？具体方法如下：1、键盘输入快捷键WIN+R，打开运行窗口。2、输入cmd，点击确定按钮。3、弹出cmd命令行窗...
- Windows 7如何打开Telnet功能（win7系统打开telnet）
-
Windows7默认安装后是没有开启telnet客户端功能的，例如，我们在开始菜单中输入cmd，然后使用telnet命令，会弹出下图提示：‘telnet’不是内部或外部命令，也不是可运行程序或批处理文...
- 为锐捷路由器交换机开启web和telnet，实现轻松管理
-
笔者上一篇文章写了关于锐捷二层交换机配置教程，那么接下来讲一下锐捷的路由交换设备配置web、telnet技巧。同样，今天的教程也是基于命令行，比较简单，适合新手小白进行学习。准备工作配置前准备：con...
- 一文学会telnet命令的用途和使用方法
-
Telnet是一个古老的远程登录协议，可以让本地计算机获得远程计算机的工作能力。它采用了TCP的可靠连接方式，可以连接任何网络互通的远程计算机。不过由于它采用了明文传输方式，存在安全风险，目前已经很少...
- Telnet命令是什么?如何使用?（telnet命令在哪里开启）
-
telnet命令是一个常用的远程登陆工具，使用它，我们可以快捷地登陆远程服务器进行操作。那么如何使用telnet命令呢？首先，我们需要打开telnet功能，任何电脑默认是关闭此功能的，开启方式如下：打...
- win11系统如何开启telnet服务(拷贝版本)
-
我们要知道，Telnet协议是Internet远程登陆服务的标准协议，可以使用户在本地计算机上完成远程主机的工作，不过对于一些刚接触win11中文版系统的用户来说，可能还不知道telnet服务在哪...
- 如何开启telnet客户端（如何开启telnet服务）
-
Telnet协议是TCP/IP协议家族中的一员，是Internet远程登陆服务的标准协议和主要方式，Telnet是常用的远程控制Web服务器的方法。工作中经常用到telnet客户端，但在windows...
- Telnet 是什么，如何启用它?（telnet有什么用）
-
对于Internet等TCP/IP网络，Telnet是一个终端仿真程序。Telnet软件在您的系统上运行并将您的个人计算机链接到网络服务器。它将所有数据转换为纯文本这一事实被认为是易受...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)