web-dev-qa-db-fra.com

Comment vérifier si la page existe en utilisant Javascript

<a href="http://www.example.com">Hello</a>

lorsque je clique sur le lien, il convient de vérifier si la page existe ou non. S'il existe, il se rend sur cette page (www.example.com) mais s'il n'existe pas, il redirige vers une autre URL.

javascripthyperlink
21
anish

Cela dépend si la page existe sur le même domaine ou non. Si vous essayez de déterminer si une page sur un domaine externe existe, cela ne fonctionnera pas - la sécurité du navigateur empêche les appels entre domaines (la politique de même origine).

Si est sur le même domaine, vous pouvez utiliser jQuery comme suggéré par Buh Buh. Bien que je vous recommande de faire une requête HEAD au lieu de la requête GET, la méthode $.ajax() par défaut le fait - la méthode $.ajax() télécharge la page entière. Effectuer une demande HEAD renverra uniquement les en-têtes et indiquera si la page existe (codes de réponse 200 - 299) ou non (codes de réponse 400 - 499). Exemple:

$.ajax({
    type: 'HEAD',
    url: 'http://yoursite.com/page.html',
success: function() {
        // page exists
},
error: function() {
        // page does not exist
}
});

Voir aussi: http://api.jquery.com/jQuery.ajax/

61
fwielstra

Un bon travail est de se faire par procuration. Si vous n'avez pas accès à un côté serveur, vous pouvez utiliser YQL. Visitez: http://developer.yahoo.com/yql/console/

À partir de là, vous pouvez faire quelque chose comme: select * from htmlstring where url="http://google.com". Vous pouvez utiliser la "requête REST" figurant sur cette page comme point de départ de votre code. 

Voici un code qui accepterait une URL complète et utiliserait YQL pour détecter si cette page existe:

function isURLReal(fullyQualifiedURL) {
    var URL = encodeURIComponent(fullyQualifiedURL),
        dfd = $.Deferred(),
        checkURLPromise = $.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20htmlstring%20where%20url%3D%22' + URL + '%22&format=json');

    checkURLPromise
            .done(function(response) {
                // results should be null if the page 404s or the domain doesn't work
                if (response.query.results) { 
                    dfd.resolve(true);
                } else {
                    dfd.reject(false);
                }
            })
            .fail(function() {
                dfd.reject('failed');
            });
    });

    return dfd.promise();
}

// usage
isURLReal('http://google.com')
        .done(function(result) {
            // yes
        })
        .fail(function(result) {
            // no, or request failed
        });

Mise à jour du 2 août 2017

Il semble que Yahoo obsolète "select * from html", bien que "select * from htmlstring" fonctionne.

7
Parris

Basé sur la documentation de XMLHttpRequest:

function returnStatus(req, status) {
  //console.log(req);
  if(status == 200) {
    console.log("The url is available");
    // send an event
  }
  else {
    console.log("The url returned status code " + status);
    // send a different event
  }
}

function fetchStatus(address) {
 var client = new XMLHttpRequest();
 client.onreadystatechange = function() {
  // in case of network errors this might not give reliable results
  if(this.readyState == 4)
   returnStatus(this, this.status);
 }
 client.open("HEAD", address);
 client.send();
}

fetchStatus("/");

Cela ne fonctionnera cependant que pour les URL du même domaine que l'URL actuelle. Voulez-vous pouvoir envoyer des requêtes ping à des services externes? Si tel est le cas, vous pouvez créer un script simple sur le serveur qui effectue votre travail pour vous et utiliser javascript pour l'appeler.

4
stef

pourquoi ne pas simplement créer un gestionnaire 404 personnalisé sur le serveur Web? c'est probablement le moyen le plus "bon ours" de le faire.

2
tenfour

S'il se trouve dans le même domaine, vous pouvez faire une demande d’en-tête avec l’objet xmlhttprequest [ajax] et vérifier le code de statut. 

S'il se trouve dans un autre domaine, envoyez une requête xmlhttprequest au serveur et demandez-lui de passer un appel pour voir s'il est opérationnel.

2
epascarello

Si vous préférez utiliser jQuery, vous pouvez faire quelque chose comme ceci ... lorsque la page est chargée, lancez un appel ajax pour chaque lien. Il suffit ensuite de remplacer le href de tous les liens qui échouent.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript">
<!--

$.fn.checkPageExists = function(defaultUrl){

    $.each(this, function(){

        var $link = $(this);

        $.ajax({
            url: $link.attr("href"),
            error: function(){
                $link.attr("href", defaultUrl);
            }
        });
    });
};

$(document).ready(function(){
    $("a").checkPageExists("default.html");
});
//-->
</script>
1
Buh Buh