如何检测网页404

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

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

需求

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

方案:

  1. 用FETCH或者AJAX请求URL,请求失败则404错误
    • 该方案随能捕获到请求错误,但是无法区分404和跨域的问题
  2. 插入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;
            });
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值