网页外部元素加载失败自检测代码失效问题求助

你的代码无法正常检测外部资源加载失败，根源在于绑定监听事件的时机太晚：DOMContentLoaded事件触发时，页面中的<link>和<script>已经开始加载（甚至已经加载失败），此时再给它们绑定error事件，根本监听不到之前的加载错误。

可行解决方案：提前捕获全局错误事件 #

不需要等到DOM加载完成，直接在页面最开始监听document的error事件（开启捕获模式），这样能拦截所有元素的加载错误，包括后续加载的外部资源。

修改后的核心代码如下：

// 放在<head>最顶部，在所有外部资源之前执行
document.addEventListener('error', function(e) {
  const target = e.target;
  // 检测是否是外部脚本加载失败
  if (target.tagName === 'SCRIPT' && target.src) {
    alert(`加载脚本失败：${target.src}`);
  }
  // 检测是否是样式表加载失败
  else if (target.tagName === 'LINK' && target.rel === 'stylesheet' && target.href) {
    alert(`加载样式表失败：${target.href}`);
  }
}, true); // 第三个参数true开启捕获模式，确保能优先捕获到元素的error事件

完整可运行示例 #

<!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" />

  <title>Lorum Title Ipsus</title>

  <script>
    // 全局捕获资源加载错误
    document.addEventListener('error', function(e) {
      const target = e.target;
      if (target.tagName === 'SCRIPT' && target.src) {
        alert(`加载脚本失败：${target.src}`);
      } else if (target.tagName === 'LINK' && target.rel === 'stylesheet' && target.href) {
        alert(`加载样式表失败：${target.href}`);
      }
    }, true);
  </script>

  <!-- 错误的资源地址，用于测试 -->
  <link href="https://ERRRORcdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>

<body>
  Lorum Ipsus
</body>
</html>

额外注意点 #

• 原代码中alert('Failed to load script:', script.src)的写法错误，alert只接受一个参数，逗号会被忽略，需要用模板字符串或字符串拼接（如'加载脚本失败：' + script.src）。
• 开启捕获模式是关键：因为元素的error事件不会冒泡，所以必须在捕获阶段监听才能全局捕获到这些事件。

内容的提问来源于stack exchange，提问作者Mort