如何检测网页404

需求

• 在前端用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;
            });
        }