JavaScript/jQuery проверяет битые ссылки

Question

Я разработал небольшую программу Javascript/jQuery для доступа к коллекции файлов PDF для внутреннего использования. И я хотел бы выделить информационный div файла PDF, если файл действительно существует.

Есть ли способ программно определить, не сломана ли ссылка на файл? Если так, то как?

Любое руководство или предложение присваивается.

Answer 1

Если файлы находятся в одном домене, вы можете использовать AJAX для проверки их существования, как сказал Алекс Секстон; Однако вы не должны использовать GET метод, просто HEAD а затем проверьте состояние HTTP для ожидаемого значения (200 или чуть меньше 400).

Вот простой метод из соответствующего вопроса:

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

Как говорит Себастьян, это невозможно из-за той же политики происхождения. Если сайт может быть опубликован (временно) в общедоступном домене, вы можете использовать одну из служб проверки ссылок. Я за ht tp://checkerr.org/

Answer 4

Если файлы не на внешнем веб-сайте, вы можете попробовать сделать 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 5

Вы можете $.ajax к этому. Если файл не существует, вы получите ошибку 404, а затем вы можете сделать все, что вам нужно (в пользовательском интерфейсе) в обратном вызове ошибки. Вам решать, как вызвать запрос (таймер?). Конечно, если у вас также есть возможность выполнять какое-то кодирование на стороне сервера, вы можете выполнить один AJAX-запрос - отсканировать каталог, а затем вернуть результаты, например, в формате JSON.

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