如何检测网页404

最新推荐文章于 2025-07-18 07:27:31 发布

原创最新推荐文章于 2025-07-18 07:27:31 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript检测前端请求是否返回404的方法。通过创建link元素并监听其加载事件来判断请求状态，这种方法可以有效地区分404错误与跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

在前端用js检测请求的链接是不是404.

方案：

用FETCH或者AJAX请求URL，请求失败则404错误
- 该方案随能捕获到请求错误，但是无法区分404和跨域的问题
插入LINK或SCRIPT标签
- SCRIPT标签能够区别跨域和404，但是会跑请求的脚本，如果刚好请求到脚本，有极大的安全隐；捕获错误的逻辑较复杂
- link 能够分404和跨域问题。

优化

如果要避免检测时，link和SCRIPT引入的问题，可以用做个检测的站点，用IFRAME去引用

code

     function testUrl(url){
            return new Promise(function (resolve, reject) {
                // 测试链接连通性, 主要检测404错误
                // 由于AJAX通常无法区分404和跨域问题
                // 所以只能用script 或者 link标签
                // link比script更容易捕获错误
                var dom= document.createElement('link');
                dom.href = url;
                dom.rel = 'stylesheet';
                document.head.appendChild(dom);
                dom.onload = function () {
                    document.head.removeChild(dom);
                    resolve();
                }
                dom.onerror = reject;
            });
        }