hyperlink caractère - Comment vérifier si la page existe en utilisant Javascript




html openclassroom (8)

Pourquoi ne pas simplement créer un gestionnaire 404 personnalisé sur le serveur Web? c'est probablement la manière la plus "bonne" de le faire.

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

Lorsque je clique sur le lien, il doit vérifier si la page existe ou non. S'il existe, il va à cette page (www.example.com) mais si la page n'existe pas, elle redirige vers une autre URL.


Une autre façon de faire est d'utiliser PHP.

Vous pourriez ajouter

<?php
if (file_exists('/index.php')) 
{ 
$url = '/index.php';
} else {
$url = '/notindex.php';
}
?>

Et alors

<a href="<?php echo $url; ?>Link</a>

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 toutefois que pour les URL du même domaine que l'URL actuelle. Voulez-vous être en mesure de faire un ping sur des services externes? Si c'est le cas, vous pouvez créer un script simple sur le serveur qui fait votre travail pour vous et utiliser javascript pour l'appeler.


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

S'il se trouve dans un autre domaine, faites une requête xmlhtt sur le serveur et demandez-lui de vérifier s'il est actif.


$.ajax({
        url: "http://something/whatever.docx",
        method: "HEAD",
        statusCode: {
            404: function () {
                alert('not found');
            },
            200: function() {
            alert("foundfile exists");
        }
        }
    });

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

Si c'est sur le même domaine, vous pouvez utiliser jQuery comme le suggère Buh Buh. Bien que je recommande de faire une requête HEAD au lieu de la requête GET, la méthode par défaut $.ajax() fait - la méthode $.ajax() téléchargera la page entière. Faire une requête HEAD ne renverra que 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/


Si vous êtes heureux d'utiliser jQuery, vous pouvez faire quelque chose comme ça. Lorsque la page se charge, effectuez un appel ajax pour chaque lien. Ensuite, remplacez simplement 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> 

Si vous avez des objets complexes dans le tableau, vous pouvez utiliser des filtres? Dans les situations où $ .inArray ou array.splice n'est pas aussi facile à utiliser. Surtout si les objets sont peut-être peu profonds dans le tableau.

Par exemple, si vous avez un objet avec un champ Id et que vous voulez que l'objet soit supprimé d'un tableau:

this.array = this.array.filter(function(element, i) {
    return element.id !== idToRemove;
});






javascript hyperlink