浅记在前端中进行404错误检测的方法。

使用 XMLHttpRequest 对象

function check404(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 404) {
                callback(true);  // 404错误
            } else {
                callback(false);  // 非404错误
            }
        }
    };
    xhr.open('GET', url, true);
    xhr.send();
}

// 使用示例
var urlToCheck = 'https://example.com/page-not-found';
check404(urlToCheck, function (is404) {
    if (is404) {
        console.log('页面不存在！');
        // 处理404错误的逻辑
    } else {
        console.log('页面存在！');
        // 处理正常情况的逻辑
    }
});

使用 Fetch API (opens new window)

function check404Fetch(url, callback) {
    fetch(url)
        .then(response => {
            if (!response.ok) {
                callback(true);  // 404错误
            } else {
                callback(false);  // 非404错误
            }
        })
        .catch(error => {
            console.error('发生网络错误:', error);
        });
}

// 使用示例
var urlToCheck = 'https://example.com/page-not-found';
check404Fetch(urlToCheck, function (is404) {
    if (is404) {
        console.log('页面不存在！');
        // 处理404错误的逻辑
    } else {
        console.log('页面存在！');
        // 处理正常情况的逻辑
    }
});

注意

在使用上述方法时，需要注意跨域限制。确保你的 JS 代码在访问其他域的资源时得到了允许，否则浏览器会阻止请求。你可能需要在服务器端进行相关配置，以允许跨域请求。