web-dev-qa-db-fra.com

JavaScript/jQuery vérifie les liens brisés

J'ai développé un petit programme Javascript/jQuery pour accéder à une collection de fichiers pdf à usage interne. Et je voulais que l'information div d'un fichier pdf soit mise en évidence si le fichier existe réellement.

Existe-t-il un moyen de déterminer par programme si un lien vers un fichier est rompu? Si c'est le cas, comment?

Tout guide ou suggestion est approprié.

javascriptjquerybroken-links
26
NawaMan

Si les fichiers se trouvent sur le même domaine, vous pouvez alors utiliser AJAX pour vérifier leur existence en tant que Alex Sexton said; Toutefois, vous ne devez pas utiliser la méthode GET, mais simplement HEAD, puis vérifiez le statut HTTP pour la valeur attendue (200 ou un peu moins de 400).

Voici une méthode simple fournie par une question connexe :

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);
});
56
Justin Johnson

Le problème est que JavaScript a la même stratégie d'origine afin que vous ne puissiez pas récupérer le contenu d'un autre domaine. Cela ne changera pas en votant vers le haut (questions sur les 17 votes). Je pense que vous en avez besoin pour les liens externes, il est donc impossible avec .js ...

2
Sebastian Lasse

Comme Sebastian dit que ce n'est pas possible en raison de la même politique d'origine. Si le site peut être publié (temporairement) sur un domaine public, vous pouvez utiliser l'un des services du vérificateur de liens. Je suis derrière checkerr.org

1
zupa

Si les fichiers ne se trouvent pas sur un site Web externe, vous pouvez essayer de faire une demande ajax pour chaque fichier. Si cela revient comme un échec, alors vous savez qu'il n'existe pas, sinon, s'il se termine et/ou prend plus de temps qu'un seuil donné pour revenir, vous pouvez deviner qu'il existe. Ce n'est pas toujours parfait, mais en général, les requêtes 'filenotfound' sont rapides.

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);
1
Alex Sexton

Comme d'autres l'ont mentionné, en raison de la même politique d'origine de JavaScript, le simple fait d'utiliser la fonction de la réponse acceptée ne fonctionne pas. Une solution consiste à utiliser un serveur proxy. Vous n'avez pas besoin d'utiliser votre propre proxy pour cela, vous pouvez utiliser ce service par exemple: https://cors-escape.herokuapp.com (code ici ).

Le code ressemble à ceci: 

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

Vous pouvez $.ajax pour cela. Si le fichier n'existe pas, vous obtiendrez une erreur 404 et vous pourrez alors faire ce dont vous avez besoin (au niveau de l'interface utilisateur) dans le rappel d'erreur. C’est à vous de décider comment déclencher la demande (minuterie?) Bien sûr, si vous avez également la possibilité de faire du codage côté serveur, vous pouvez faire une seule demande AJAX - parcourir le répertoire puis renvoyer les résultats sous la forme JSON.

0
Bostone