web-dev-qa-db-fra.com

en utilisant javascript pour détecter si l'url existe avant de l'afficher dans iframe

J'utilise javascript pour transmettre une URL dynamique à iframe src. mais parfois l'url n'existe pas, comment pourrais-je détecter l'url inexistante au préalable, afin que je puisse masquer l'iframe avec une erreur 404.

javascriptiframehttp-status-code-404
31
Mario

En raison de ma faible réputation, je n'ai pas pu commenter la réponse de Derek 朕 會 功夫. J'ai essayé ce code tel qu'il est et cela n'a pas bien fonctionné. Il y a trois problèmes avec le code de Derek 朕 會 功夫.

  1. La première est que le temps pour asynchroniser l'envoi de la demande et changer sa propriété 'status' est plus lent que pour exécuter l'expression suivante - if (request.status === "404"). Ainsi, le request.status finira par, en raison de la bande Internet, rester sur l'état 0 (zéro), et il n'atteindra pas le code juste en dessous si. Pour résoudre ce problème, rien de plus simple: changez 'true' en 'false' sur la méthode open de la requête ajax. Cela entraînera un blocage bref (ou pas) de votre code (en raison d'un appel synchrone), mais modifiera le statut de la demande avant d'atteindre le test sur if.

  2. La seconde est que le statut est un entier. En utilisant l'opérateur de comparaison javascript '===', vous essayez de comparer si l'objet du côté gauche est identique à celui du côté droit. Pour que cela fonctionne, il existe deux façons:

    • Supprimez les guillemets qui entourent 404, ce qui en fait un entier;
    • Utilisez l'opérateur javascript '==' pour tester si les deux objets sont similaires.

  3. Le troisième est que l'objet XMLHttpRequest ne fonctionne que sur les nouveaux navigateurs (Firefox, Chrome et IE7 +). Si vous voulez que cet extrait fonctionne sur tous les navigateurs, vous devez le faire de la manière que W3Schools suggère: - w3schools ajax

Le code qui a vraiment fonctionné pour moi était:

var request;
if(window.XMLHttpRequest)
    request = new XMLHttpRequest();
else
    request = new ActiveXObject("Microsoft.XMLHTTP");
request.open('GET', 'http://www.mozilla.org', false);
request.send(); // there will be a 'pause' here until the response to come.
// the object request will be actually modified
if (request.status === 404) {
    alert("The page you are trying to reach is not available.");
}
53
GPrimola

tilisez un XHR et voyez s'il vous répond 404 ou non.

var request = new XMLHttpRequest();  
request.open('GET', 'http://www.mozilla.org', true);
request.onreadystatechange = function(){
    if (request.readyState === 4){
        if (request.status === 404) {  
            alert("Oh no, it does not exist!");
        }  
    }
};
request.send();

Mais notez que cela ne fonctionnera que sur la même origine. Pour un autre hôte, vous devrez tiliser un langage côté serveur pour ce faire, que vous devrez déterminer par vous-même.

29
Derek 朕會功夫

J'ai trouvé que cela fonctionnait dans mon scénario.

Les méthodes de rappel jqXHR.success (), jqXHR.error () et jqXHR.complete () introduites dans jQuery 1.5 sont obsolètes à partir de jQuery 1.8. Pour préparer votre code pour leur suppression éventuelle, utilisez plutôt jqXHR.done (), jqXHR.fail () et jqXHR.always ().

$.get("urlToCheck.com").done(function () {
  alert("success");
}).fail(function () {
   alert("failed.");
});
5
fragmint

Vous pouvez tester l'URL via AJAX et lire le code d'état - c'est-à-dire si l'URL est dans le même domaine.

S'il s'agit d'un domaine distant, vous pouvez avoir un script de serveur sur votre propre domaine vérifier une URL distante.

2
Joseph

Vous pouvez essayer de faire un simple GET sur la page, si vous obtenez un 200, cela signifie que la page existe. Essayez ceci (en utilisant jQuery), la fonction est la fonction de rappel réussie sur un chargement de page réussi. Notez que cela ne fonctionnera que sur les sites de votre domaine pour empêcher XSS. Les autres domaines devront être gérés côté serveur

$.get(
   yourURL,
   function(data, textStatus, jqXHR) {
      //load the iframe here...
   }
);
1
Matt Dodge