如何判断一个 <script> tag 加载失败？

在网页开发中，我们经常使用 <script> 标签来引入外部的 JavaScript 文件。然而，有时候这些脚本文件可能加载失败，这可能会导致网页无法正常工作。本文将介绍一些方法来判断一个 <script> 标签是否加载失败。

1. 使用 onload 和 onerror 事件

<script> 标签支持 onload 和 onerror 事件，我们可以利用这些事件来判断脚本文件是否加载成功。例如，我们可以在 <script> 标签中添加 onload 和 onerror 处理函数：

<script src="path/to/script.js" onload="scriptLoaded()" onerror="scriptFailed()"></script>

当脚本文件成功加载完成时，scriptLoaded() 函数会被调用；当脚本加载失败时，scriptFailed() 函数会被调用。

这种方法可以适用于使用普通的 <script> 标签引入 JavaScript 文件的情况，但是对于一些特殊情况，例如使用动态创建的 <script> 标签或通过 JavaScript 代码插入的脚本，就无法直接使用这种方法。

2. 使用 document.createElement() 动态创建 <script> 标签

如果使用动态创建的 <script> 标签来加载 JavaScript 文件，上述的 onload 和 onerror 事件无法直接使用。但是我们可以使用 document.createElement() 方法来动态创建 <script> 标签，并添加到文档中，然后监听 load 和 error 事件来判断脚本是否加载成功。

const script = document.createElement('script');
script.src = 'path/to/script.js';

script.addEventListener('load', scriptLoaded);
script.addEventListener('error', scriptFailed);

document.head.appendChild(script);

上述代码将创建一个新的 <script> 标签，并将其添加到文档头部。当脚本文件成功加载完成时，scriptLoaded() 函数会被调用；当脚本加载失败时，scriptFailed() 函数会被调用。

3. 使用 Promise 和 onload 事件

我们还可以使用 Promise 和 onload 事件来判断 <script> 标签是否成功加载。通过创建一个 Promise 包装器，可以在脚本加载成功时解析 Promise，加载失败时拒绝 Promise。

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;

    script.onload = resolve;
    script.onerror = reject;

    document.head.appendChild(script);
  });
}

// 使用示例
loadScript('path/to/script.js')
  .then(() => {
    console.log('Script loaded successfully');
  })
  .catch(() => {
    console.error('Failed to load script');
  });

这种方法相比于直接监听 onload 和 onerror 事件更加灵活，可以方便地处理成功和失败的回调函数。

以上是一些常用的方法来判断 <script> 标签是否加载成功或失败。根据不同的需求和场景，可以选择适合自己的方法来判断脚本加载状态，以便在脚本加载失败时及时进行相应的处理。