JavaScript/jQuery 检查损坏的链接

Question

我开发了一个小型 Javascript/jQuery 程序来访问 pdf 文件集合以供内部使用。我想突出显示 pdf 文件的信息 div（如果该文件确实存在）。

有没有一种方法可以以编程方式确定文件的链接是否已损坏？如果是这样，怎么办？

任何指南或建议均适用。

Answer 1

如果文件位于同一域中，则可以使用 AJAX 来测试它们是否存在

以下是相关问题提供的简单方法：

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);
});

Answer 2

问题是 JavaScript 具有同源策略，因此您无法从另一个域获取内容。这不会因为投票而改变（想知道 17 票）。
我认为你需要它作为外部链接，所以仅仅使用 .js 是不可能的......

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);

Answer 4

您可以使用 $.ajax 来获取它。如果文件不存在，您将收到 404 错误，然后您可以在错误回调中执行您需要的任何操作（UI 方面）。如何触发请求（计时器？）取决于您。当然，如果您也有能力执行一些服务器端编码，您可以执行单个 AJAX 请求 - 扫描目录，然后返回 JSON 格式的结果。

Answer 5

正如塞巴斯蒂安所说，由于同源政策，这是不可能的。如果该网站可以（暂时）在公共域上发布，您可以使用其中的链接检查器服务之一。我支持 checkerr.org

Answer 6

正如其他人提到的，由于 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);
});