JavaScript/jQuery检查损坏的链接

Question

我开发了一个小的Javascript/jQuery程序，用于访问一组内部使用的PDF文件。如果文件实际存在，我希望能够突出显示PDF文件的信息div。

有没有一种编程方法可以确定链接到文件是否损坏？如果有，该如何实现？

非常感谢任何指南或建议。

- NawaMan

Answer 1

如果文件在同一域中，则可以像Alex Sexton所说使用AJAX来测试它们的存在；但是，您不应该使用GET方法，只需使用HEAD方法，然后检查HTTP状态以获取期望值（200或小于400）。

这里提供了一个简单的方法，来自related question：

function urlExists(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      callback(xhr.status < 400);
    }
  };
  xhr.open('HEAD', url);
  xhr.send();
}

urlExists(someUrl, function(exists) {
    console.log('"%s" exists?', someUrl, exists);
});

- Justin Johnson

---

请查询JavaScript的同源策略。 - Justin Johnson

只有服务器允许才行。它可以启用/禁用。 - Justin Johnson

有没有办法从JavaScript检查外国域名的链接？我只想验证它，而不获取任何内容... 没有吗？ - vp_arth

Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://www.google.com/'. - 夏期劇場

问题中嵌入的http://binarykitten.com/js/88-jquery-plugin-ajax-head-request.html URL现在是404，我已经删除了超链接。 - Funk Forty Niner

Answer 2

问题在于JavaScript有同源策略，因此无法从其他域名抓取内容。即使有17个赞，这也不会改变。我认为你需要它来处理外部链接，所以仅使用.js是不可能的...

- Sebastian Lasse

Answer 3

如果文件不在外部网站上，您可以尝试为每个文件创建一个ajax请求。如果返回失败，则知道它不存在；否则，如果完成和/或需要更长时间才能返回，则可以猜测它存在。这并不总是完美的，但通常“filenotfound”请求很快。

var threshold   = 500,
    successFunc = function(){ console.log('It exists!'); };

var myXHR = $.ajax({
  url: $('#checkme').attr('href'),
  type: 'text',
  method: 'get',
  error: function() {
    console.log('file does not exist');
  },
  success: successFunc
});

setTimeout(function(){
  myXHR.abort();
  successFunc();
}, threshold);

- Alex Sexton

Answer 4

如其他用户已经提到的那样，由于JavaScript的同源策略，简单地使用接受答案中的函数是行不通的。解决该问题的方法是使用代理服务器。您无需自己创建代理即可使用此服务，例如：https://cors-escape.herokuapp.com (代码 在这里)。

代码如下：

var proxyUrl = "https://cors-anywhere.herokuapp.com/";

function urlExists(url, callback) {
  var sameOriginURL = proxyUrl + url;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      callback(xhr.status < 400);
    }
  };
  xhr.open('HEAD', sameOriginURL);
  xhr.send();
}

urlExists(someUrl, function(exists) {
  console.log('"%s" exists?', someUrl, exists);
});

- Csa77

Answer 5

就像Sebastian所说的，由于同源策略，这是不可能的。如果网站可以（暂时地）发布在一个公共域名上，你可以使用其中一个链接检查服务。我支持checkerr.org

- zupa

Answer 6

您可以使用$.ajax方法。如果文件不存在，您将会得到 404 错误，并且可以在错误回调中执行任何您需要的操作（UI 方面）。请求的触发方式由您决定（例如定时器？）当然，如果您还有能力进行一些服务器端编码，您也可以进行单个 AJAX 请求 - 扫描目录，然后以 JSON 的形式返回结果。

- Bostone