错误URL下createElement无报错，loadScript脚本加载异常问题咨询

让我来逐个解答你的问题：

问题1：为什么使用createElement创建script标签并传入错误URL时未触发任何报错？ #

这里有两个核心原因：

• 你用try/catch包裹的是创建和添加script标签的同步代码，这部分逻辑本身不会抛出错误——创建标签、设置属性、添加到DOM都是能正常完成的同步操作，哪怕URL是错的，这些步骤也不会触发异常，所以catch块根本不会执行。
• 脚本的加载是异步过程，它的错误不会冒泡到包裹同步代码的try/catch中。另外，onerror没触发可能是因为服务器对不存在的URL返回了200 OK响应（比如很多SPA的 fallback 页面、自定义错误页会返回200），这种情况下浏览器会认为资源已成功加载，只会触发onload，而非onerror。只有当请求出现网络错误（比如断网）或服务器返回4xx/5xx状态码时，才会触发script标签的onerror事件。

问题2：如何检测脚本不存在的情况？ #

你的代码逻辑本身没问题，但遇到服务器返回200无效内容的场景时，onload会被误触发。这里提供几个实用的解决方案：

方案1：验证脚本的全局暴露变量（针对有明确输出的脚本） #

如果要加载的脚本会在window上暴露特定的变量或方法，可以在onload回调里检查这个变量是否存在：

export const loadScript = ({ url, id, globalCheck }) => {
  return new Promise((resolve, reject) => {
    const scriptTag = document.createElement("script");
    scriptTag.src = url;
    scriptTag.id = id;

    scriptTag.onerror = (e) => {
      console.log("加载失败", e);
      reject(new Error(`加载脚本失败: ${url}`));
    };

    scriptTag.onload = () => {
      // 检查约定的全局变量是否存在
      if (globalCheck && !window[globalCheck]) {
        reject(new Error(`脚本加载成功但未执行预期内容: ${url}`));
        // 清理无效的脚本标签
        document.body.removeChild(scriptTag);
        return;
      }
      resolve("加载完成");
    };

    document.body.appendChild(scriptTag);
  });
};

// 使用示例：加载jQuery，检查window.jQuery是否存在
loadScript({ url: "https://wrong-url.com/jquery.js", id: "jquery", globalCheck: "jQuery" })
  .then(res => console.log(res))
  .catch(err => console.error(err));

方案2：通过XHR提前验证资源合法性 #

可以先用XMLHttpRequest请求脚本，验证响应的Content-Type是否为合法的JS类型，再创建script标签加载内容：

export const loadScript = ({ url, id }) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);

    xhr.onload = () => {
      if (xhr.status === 200) {
        // 检查响应头的内容类型
        const contentType = xhr.getResponseHeader("Content-Type");
        if (!contentType || !contentType.includes("javascript")) {
          reject(new Error(`无效的脚本内容类型: ${contentType}`));
          return;
        }
        // 直接用响应内容创建脚本，避免重复请求
        const scriptTag = document.createElement("script");
        scriptTag.id = id;
        scriptTag.textContent = xhr.responseText;
        
        scriptTag.onload = () => resolve("加载完成");
        scriptTag.onerror = (e) => reject(new Error(`脚本执行失败: ${e.message}`));
        document.body.appendChild(scriptTag);
      } else {
        reject(new Error(`请求失败，状态码: ${xhr.status}`));
      }
    };

    xhr.onerror = () => reject(new Error(`网络请求失败: ${url}`));
    xhr.send();
  });
};

这个方法能提前过滤无效资源，但注意如果脚本跨域，需要目标服务器配置CORS。

方案3：监听全局错误捕获脚本执行异常 #

如果脚本加载成功但内容有语法错误，会触发全局error事件，可以在onload后短暂监听这个事件：

export const loadScript = ({ url, id }) => {
  return new Promise((resolve, reject) => {
    let scriptError = null;
    const handleGlobalError = (e) => {
      // 判断错误是否来自当前加载的脚本
      if (e.filename === url) {
        scriptError = e.error;
      }
    };
    window.addEventListener("error", handleGlobalError);

    const scriptTag = document.createElement("script");
    scriptTag.src = url;
    scriptTag.id = id;

    scriptTag.onerror = (e) => {
      window.removeEventListener("error", handleGlobalError);
      reject(new Error(`加载失败: ${e.message}`));
    };

    scriptTag.onload = () => {
      // 延迟一点，等待脚本执行可能抛出的错误
      setTimeout(() => {
        window.removeEventListener("error", handleGlobalError);
        if (scriptError) {
          reject(new Error(`脚本执行错误: ${scriptError.message}`));
        } else {
          resolve("加载完成");
        }
      }, 100);
    };

    document.body.appendChild(scriptTag);
  });
};

这个方法能捕获脚本执行时的语法错误，但依赖定时器，精度有限，且可能被其他脚本的错误干扰。

另外补充：你代码里的try/catch其实是多余的，创建和添加script标签的同步代码几乎不会抛出错误，可以直接去掉。

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