时间戳

首页 > 解决方案 > 如何有效地检查 url 是否有效（实际上是加载带有内容的页面）？

javascript - 如何有效地检查 url 是否有效（实际上是加载带有内容的页面）？

问题描述

问题：

如何检查 url 是否有效并实际加载页面？

使用我当前的代码，只检查状态代码，这意味着像http://fsd.com/这样的 url将被视为有效，尽管它不加载任何内容。

如何检查 url 是否实际指向可以加载的网站？

代码：

$.ajax({
                    url: link,
                    dataType: 'jsonp', 
                    statusCode: {
                        200: function() {
                            console.log( "status code 200 returned");
                            validURL = true;
                        },
                        404: function() {
                            console.log( "status code 404 returned");
                            validURL = false;
                        }
                    },
                    error:function(){
                        console.log("Error");
                    }
                });

编辑：通过有效，我的意思是页面最终部分加载（至少加载了 html 和 css），而不是永远加载或以某种方式失败而状态代码为 404。

EDIT2： http: //fsd.com现在实际上返回了 404，因为它应该...

EDIT3：另一个示例：https ://dsd.com加载一个空页面（状态代码 200），而http://dsd.com实际上加载一个包含内容的页面（状态代码 200）。在我的 Node.js 后端，npm 包“url-exists”表示https://dsd.com无效，而带有问题中显示的代码的前端表示它是有效的 url。这是包代码的样子：https ://github.com/boblauer/url-exists/blob/master/index.js但我想知道根据 SO 用户的最佳方式是什么。

编辑4：

可悲的是，Addis 提供的请求显然被 CORS 阻止了，这阻止了我的其余代码的执行，而我的原始请求没有。

$.ajax({
                    type: "HEAD",
                    url: link,
                    dataType: 'jsonp', 
                }).done(function(message,text,response){
                    const size = response.getResponseHeader('Content-Length');
                    const status = response.status;
                    console.log("SIZE: "+size);
                    console.log("STATUS: "+status);
                    if(size > 0 && status == "200") {
                        $("#submitErrorMessage").css("display","none");
                        $('#directoryForm').submit();
                    }
                    else {
                        $("#submitErrorMessage").css("display","block");
                        $("#submitLoading").css("display","none");
                    }
                });

编辑 5：

更准确地说，这两个请求都会在浏览器控制台中触发一条警告消息，指示响应已因 CORS 而被阻止，但我的原始代码实际上是完整执行的，而另一个请求没有到达 console.log( ）。

编辑 6：

$.ajax({
                    async: true,
                    url: link,
                    dataType: 'jsonp', 
                    success: function( data, status, jqxhr ){
                        console.log( "Response data received: ", data );
                        console.log("Response data length: ", data.length);
                        console.log("Response status code: ", status);
                        if (status == "200" && data.length > 0) {
                            $("#submitErrorMessage").css("display","none");
                            $('#directoryForm').submit();
                        }
                        else {
                            $("#submitErrorMessage").css("display","block");
                            $("#submitLoading").css("display","none"); 
                        }

                    },
                    error:function(jqXHR, textStatus, errorThrown){
                        console.log("Error: ", errorThrown);
                    }
                });

错误：

Error:  Error: jQuery34108117853955031047_1582059896271 was not called
    at Function.error (jquery.js:2)
    at e.converters.script json (jquery.js:2)
    at jquery.js:2
    at l (jquery.js:2)
    at HTMLScriptElement.i (jquery.js:2)
    at HTMLScriptElement.dispatch (jquery.js:2)
    at HTMLScriptElement.v.handle (jquery.js:2)

标签： javascriptjqueryajaxurlstatus

解决方案

该HEAD请求用于获取meta-information包含在 HTTP 标头中。好消息是响应不包含正文。它非常快，服务器中不应该有任何繁重的处理来处理它。这使其便于快速状态检查。

HEAD 方法与 GET 相同，只是服务器不能在响应中返回消息体。响应 HEAD 请求的 HTTP 标头中包含的元信息应该与响应 GET 请求发送的信息相同。此方法可用于获取有关请求所隐含的实体的元信息，而无需传输实体主体本身。这种方法通常用于测试超文本链接的有效性、可访问性和最近的修改。 www.w3.org

$.ajax({
    type: "HEAD",
    async: true,
    url: link,
    dataType: 'json', 
}).done(function(message,text,response){
    const size = response.getResponseHeader('Content-Length');

    //optionally you may check for the status code to know if the request has been successfully completed
    const status = response.status;
});

Content-Length是头部请求中可用的元数据之一，它以字节为单位给出正文的大小，因此通过仅检查大小而不加载整个页面，您可以检查响应正文中是否有某些内容。-

编辑：上面的 代码是用于dataType. json对于dataTypeof ，和属性的jsonp回调函数将接受如下响应：successerror

$.ajax({
    url: link,
    dataType: 'jsonp', 
    crossDomain: true,
    data: data,
    success: function( data, status, jqxhr ){
        console.log( "Response data received: ", data );
        console.log("Response data length: ", data.length);
        console.log("Response status code: ", status);
    },
    error:function(jqXHR, textStatus, errorThrown){
        console.log("Error: ", errorThrown);
    }
}

推荐阅读