Cuando ejecutamos un determinado proyecto, es posible que algunos de sus scripts JavaScript no se carguen y se informará un error. Por ejemplo, las aplicaciones de interfaz de una sola página se crean básicamente a través de js, una vez que no se pueden cargar, el proyecto no se puede ejecutar, ¿qué debo hacer? ¿Cómo podemos solucionar este problema?
La solución utilizada aquí es recargar el script JavaScript. Entonces, ¿cuándo recargar js y cómo recargar js? Cuando no se puede cargar el script js, es necesario volver a intentar la carga. Entonces, ¿cómo sabemos si js no se pudo cargar? Podemos agregar un evento para escuchar si falla la carga en el <script src="https://cdn.topskys.org/v0/loadjs.js"></script> tag οnerrοr= "console.log('error')", cuando ocurre un error, se activará el evento onerror.
<!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>
</head>
<body>
<script onerror="console.log('error')" src="https://cdn.topskys.org/v0/loadjs.js"></script>
</body>
</html>
Se puede ver que cuando ocurre un error al cargar js, onerror escucha el error. Sin embargo, en un entorno de ingeniería, estos elementos de etiqueta <script></script> se generan automáticamente y agregar eventos de error a estas etiquetas es particularmente problemático. Podemos agregar un evento de escucha de errores a toda la ventana:
<!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>
</head>
<body>
<script src="https://cdn.topskys.org/v0/loadjs.js"></script>
<script>
window.addEventListener("error",e=>{
console.log("error loading")
});
</script>
</body>
</html>Pero hubo un error en la carga del último script js, si la ventana que escuchó el evento de error no se ha registrado, por lo que debemos escribirlo al frente, colocarlo en <head></head> y escuchar. desde el principio. Por supuesto, no se activará cuando se escriba al frente, porque no provocará la propagación de eventos y solo puede obtener el evento en la fase de captura y agregar ", verdadero" después de la función de monitoreo de eventos:
<!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>
window.addEventListener("error", e => {
console.log("error loading")
},true); // 捕获阶段拿到事件
</script>
</head>
<body>
<script src="https://cdn.topskys.org/v0/loadjs.js"></script>
</body>
</html>
También hay muchos tipos de eventos que desencadenan errores, como errores de carga de imágenes, y el informe de error 1 en js también provocará errores. ¿Cómo puedo limitar el alcance de los errores desencadenantes y escuchar solo aquellos casos en los que <script src=""></script> no puede cargar js? Descubrimos que en el evento de error, el objetivo de la entrada del parámetro e es el elemento del script:
Sin embargo, throw informa un error ErrorEvent en el evento de error, que contiene varios atributos, para que podamos encontrar con precisión un determinado tipo de error.
<script>
throw 1;
</script>
Necesitamos hacer un juicio en el evento de error de escucha de la ventana:
<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>
window.addEventListener("error", e => {
const tag=e.target
if(tag.tagName==='SCRIPT' && !(e instanceof ErrorEvent)) {
console.log("JS 加载错误")
}
},true);
</script>
</head>Esta página ha resuelto el problema de cuándo recargar js y queda cómo volver a intentar cargar js.
En primer lugar, debemos introducir etiquetas de secuencia de comandos con múltiples direcciones nuevas para cargar js. Cuando un determinado js no se carga, se activará el error del evento de escucha de ventana, se ejecutará el reintento y se cambiará el nombre de dominio para generar una nueva etiqueta de secuencia de comandos para cargar. js, que debe depender de document.write (), puede bloquear la carga de js posterior y no bloquear la carga de js posterior, lo que causará confusión en el orden de carga de js.
Tenga en cuenta que cuando se utiliza document.write() para escribir etiquetas de secuencia de comandos, el terminador de la etiqueta debe traducirse; de lo contrario, se considerará como el terminador de la etiqueta anterior.
<!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 domains = ["https://cdn.topskys.org/v0", "https://cdn.topskys1.org/v1", "https://cdn.topskys2.org/v2"]; // 重试域名数组
const maxRetry=3; // 最多重试次数
const retryInfo={}; // 记录重试次数及下一个重试的域名数组下标{times:1,nextIndex:2}
window.addEventListener("error", e => {
const tag = e.target
if (tag.tagName === 'SCRIPT' && !(e instanceof ErrorEvent)) {
// console.log("JS 加载错误")
const url=new URL(tag.src) // 拿到script标签的src域名
if(!retryInfo[url.pathname]){
retryInfo[url.pathname]={
times:0,
nextIndex:0,
}
}
const info=retryInfo[url.pathname]; // 取出文件路径 ./loadjs.js ./js.js ./y.js
const script=document.createElement("script")
url.host=domains[info.nextIndex]; // 更换域名
document.write(`<script src="${url.toString()}">\<\/script>`); // 新加载script元素，需要阻塞后面的script加载js，否则加载js顺序会乱。注意转译</script>，否则会被认为上面的script结束标签。
script.src=url.toString();
document.body.insertBefore(script,tag); // 将新的script标签插入加载错误标签前
// 修改重试信息
info.times++;
info.nextIndex=(info.nextIndex+1)%domains.length;
}
}, true);
</script>
</head>
<body>
<script src="https://cdn.topskys.org/v0/js.js"></script>
<script src="https://cdn.xx1.cn/y.js"></script>
<script src="https://cdn.xx2.com/loadjs.js"></script>
</body>
</html>Luego, se resuelve cómo resolver el problema de la falla de carga de js. Pero si hay proyectos diferidos, asíncronos y de ingeniería en la etiqueta script, ¿cómo solucionarlo?
Copie este enlace, abra la búsqueda de Douyin y mire el video directamente.