JavaScript/jQuery 检查损坏的链接答案

【问题标题】：JavaScript/jQuery check broken linksJavaScript/jQuery 检查损坏的链接
【发布时间】：2010-12-08 03:55:53
【问题描述】：

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

有没有办法以编程方式确定文件的链接是否损坏？如果有，怎么做？

任何指南或建议都是合适的。

【问题讨论】：

【解决方案1】：

正如其他人所提到的，由于 JavaScript 的同源策略，简单地使用已接受答案中的函数是行不通的。解决方法是使用代理服务器。您不必为此使用自己的代理，您可以使用此服务，例如：https://cors-escape.herokuapp.com（代码here）。

代码如下所示：

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

【讨论】：

【解决方案2】：

如果文件在同一个域中，那么您可以使用 AJAX 来测试它们是否存在，如Alex Sexton 所说； 但是，您不应使用 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);
});

【讨论】：

我希望我知道如何为 OP 的问题实现这一点。有人吗？
我收到此代码错误：“Access-Control-Allow-Origin 不允许Origin localhost。”
请查阅 JavaScript 的同源策略。
只有在服务器允许的情况下。它可以启用/禁用。
问题中嵌入的 binarykitten.com/js/88-jquery-plugin-ajax-head-request.html URL 现在是 404，我删除了超链接。

【解决方案3】：

就像塞巴斯蒂安所说，由于相同的原产地政策，这是不可能的。如果该站点可以（临时）在公共域上发布，您可以使用其中一种链接检查器服务。我落后了checkerr.org

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

你可以$.ajax 给它。如果文件不存在，您将收到 404 错误，然后您可以在错误回调中执行您需要的任何操作（UI 方面）。如何触发请求（计时器？）由您决定

【讨论】：

【解决方案6】：

如果文件不在外部网站上，您可以尝试为每个文件发出 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);

【讨论】：