如何使用 JavaScript 检查页面是否存在

IT技术 javascript hyperlink
2021-01-26 23:40:37

我有一个链接:<a href="http://www.example.com">Hello</a>

当有人点击链接时,我想通过 JavaScript 检查 href 属性指向的页面是否存在。如果该页面存在,浏览器将重定向到该页面(在本例中为“www.example.com”),但如果该页面不存在,则浏览器应重定向到另一个 URL。

6个回答

这取决于页面是否存在于同一域中。如果您试图确定外部域上的页面是否存在,它将不起作用 - 浏览器安全性阻止跨域调用(同源策略)。

如果在同一个域但是,您可以使用jQuery像寮步寮步建议。尽管我建议使用 HEAD 请求而不是 GET 请求,但默认$.ajax()方法会这样做——该$.ajax()方法将下载整个页面。执行 HEAD 请求将仅返回标头并指示页面是否存在(响应代码 200 - 299)或不存在(响应代码 400 - 499)。例子:

$.ajax({
    type: 'HEAD',
    url: 'http://yoursite.com/page.html',
success: function() {
        // page exists
},
error: function() {
        // page does not exist
}
});

另见:http : //api.jquery.com/jQuery.ajax/

为什么这只能在域内?
2021-03-24 23:40:37
@JensMander,正如答案所述,这是由于浏览器具有防止跨域调用的同源策略。AFAIK,此策略是为了防止 XSS 和其他安全漏洞。
2021-03-28 23:40:37

一个很好的解决方法是代理。如果您无权访问服务器端,则可以使用 YQL。访问:http : //developer.yahoo.com/yql/console/

从那里,你可以这样做:select * from htmlstring where url="http://google.com"您可以使用他们在该页面上的“REST 查询”作为代码的起点。

下面是一些接受完整 URL 并使用 YQL 检测该页面是否存在的代码:

function isURLReal(fullyQualifiedURL) {
    var URL = encodeURIComponent(fullyQualifiedURL),
        dfd = $.Deferred(),
        checkURLPromise = $.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20htmlstring%20where%20url%3D%22' + URL + '%22&format=json');

    checkURLPromise
            .done(function(response) {
                // results should be null if the page 404s or the domain doesn't work
                if (response.query.results) { 
                    dfd.resolve(true);
                } else {
                    dfd.reject(false);
                }
            })
            .fail(function() {
                dfd.reject('failed');
            });

    return dfd.promise();
}

// usage
isURLReal('http://google.com')
        .done(function(result) {
            // yes, or request succeded
        })
        .fail(function(result) {
            // no, or request failed
        });

2017 年 8 月 2 日更新

看起来雅虎已弃用“select * from html”,尽管“select * from htmlstring”确实有效。

这是一个很好的答案。但您必须注意,例如,对于包含“User-agent: * Disallow: /”的 robots.txt 的网站,此方法将导致“失败”(因为 Yahoo API 将返回空结果)。为了更安全,您必须查看“http-status-code”键值。
2021-03-19 23:40:37
这总是返回失败
2021-04-04 23:40:37
当查询失败时,它将成为“url”对象的一部分。示例:query.yahooapis.com/v1/public/yql?q =select% 20 *%20from%20html%20where%20url%3D%22wordpress.com%2Fwp-admin%2F%22&format=json&diagnostics=true&callback=
2021-04-05 23:40:37
@BastienLibersa 在哪里可以找到“http-status-code”?我没有在响应对象中找到它
2021-04-10 23:40:37
@reggie yahoo 在 7 月初弃用了一些东西。现在替换一些代码。
2021-04-11 23:40:37

基于 XMLHttpRequest 的文档:

function returnStatus(req, status) {
  //console.log(req);
  if(status == 200) {
    console.log("The url is available");
    // send an event
  }
  else {
    console.log("The url returned status code " + status);
    // send a different event
  }
}

function fetchStatus(address) {
 var client = new XMLHttpRequest();
 client.onreadystatechange = function() {
  // in case of network errors this might not give reliable results
  if(this.readyState == 4)
   returnStatus(this, this.status);
 }
 client.open("HEAD", address);
 client.send();
}

fetchStatus("/");

但是,这仅适用于与当前 URL 位于同一域中的 URL。您是否希望能够 ping 外部服务?如果是这样,您可以在为您完成工作的服务器上创建一个简单的脚本,并使用 javascript 调用它。

如果是同域,可以用xmlhttprequest对象[ajax]做head请求,查看状态码。

如果它在另一个域中,则向服务器发出 xmlhttprequest 并让它进行调用以查看它是否已启动。

为什么不在 Web 服务器上创建自定义 404 处理程序?这可能是做到这一点的更“好熊”的方式。