脚本加载404错误无法被try/catch捕获，能否添加判断语句处理？

为什么try/catch无法捕获404错误 #

动态创建<script>标签加载资源属于异步操作，try/catch仅能捕获同步执行过程中抛出的错误。当你调用document.body.appendChild(t)时，只是发起了脚本加载请求，后续的404错误发生在异步请求阶段，不在当前同步代码的执行上下文里，因此无法被try/catch捕获。

正确的错误捕获与备用加载方案 #

方案1：监听script元素的error事件 #

直接为动态创建的script标签绑定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.0">
    <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
    <script src="blockman.js"></script>
    <title>Document</title>
    <button onclick="f()">Test</button>
</head>
<body>
</body>
<script>
    // 封装脚本加载函数，支持备用地址
    function loadScript(primaryUrl, backupUrl) {
        const script = document.createElement('script');
        script.src = primaryUrl;
        
        // 主地址加载失败时切换备用地址
        script.onerror = function() {
            alert('主脚本加载失败，尝试备用地址');
            script.src = backupUrl;
            // 可绑定二次error事件，处理备用地址也失败的情况
            script.onerror = function() {
                alert('备用脚本也加载失败');
            };
        };
        
        document.body.appendChild(script);
    }

    // 调用加载函数
    loadScript(
        'https://vdkhiyrhibxzmpiophft.w3spaces.com/scripts.js',
        'https://craigapphostl.w3spaces.com/scripts.js'
    );
</script>
</html>

方案2：先通过HEAD请求检查资源状态（需注意跨域） #

如果目标服务器允许跨域请求（返回Access-Control-Allow-Origin响应头），可以先发送HEAD请求判断资源是否存在，再决定加载哪个地址：

async function loadScriptWithCheck(primaryUrl, backupUrl) {
    let targetUrl = primaryUrl;
    
    try {
        const response = await fetch(primaryUrl, { method: 'HEAD' });
        if (!response.ok) { // 状态码非2xx（如404），切换备用地址
            targetUrl = backupUrl;
        }
    } catch (e) {
        // HEAD请求失败（如跨域限制），直接使用备用地址
        targetUrl = backupUrl;
    }

    const script = document.createElement('script');
    script.src = targetUrl;
    script.onerror = function() {
        alert('最终脚本加载失败');
    };
    document.body.appendChild(script);
}

// 调用函数
loadScriptWithCheck(
    'https://vdkhiyrhibxzmpiophft.w3spaces.com/scripts.js',
    'https://craigapphostl.w3spaces.com/scripts.js'
);

注意事项 #

• 跨域限制：如果备用脚本的域名与当前页面域名不同，需确保目标服务器允许跨域资源共享（CORS），否则HEAD请求会失败，此时方案1的可靠性更高。
• 全局onerror：你之前写的<script onerror="error()"></script>无效，空script标签不会触发error事件，若需全局监听错误，应使用window.onerror，但针对脚本加载错误，为单个script绑定error事件更精准。

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