web-dev-qa-db-fra.com

Comment détecter une erreur 404 dans un iframe?

Ma page Web utilise des iframes pour collecter le contenu d'autres pages. Toutes les pages sont dans le même domaine.

À partir de la page principale, existe-t-il un moyen de confirmer que tous les iframes ont été chargés et qu'il n'y a pas d'erreur 404?

javascriptiframehttp-status-code-404
27
Christophe

Le statut ne vit que dans l'en-tête de réponse.

La page 404 gère un code d'état HTTP , qui est uniquement inclus dans la réponse du serveur envoyée au navigateur, mais pas dans les objets réels window et document de le DOM auquel javascript peut accéder. Cela signifie que bien que vous puissiez certainement collecter le code d'état et prendre les mesures appropriées, vous ne pouvez le faire que lorsque votre javascript reçoit la réponse, comme avec une demande jQuery.ajax () ou une - XmlHttRequest pour charger votre "iframe" .

J'espère que la page 404 suit les normes 404.

Si ce qui précède n'est pas une option, la seule autre possibilité peut être de vérifier le titre et/ou les balises H pour "404". Bien que ce ne soit certainement pas idéal (j'aimerais voir "404, Movie not Found, the Movie."), C'est votre seule autre option.

$('#iframe').load(function (e) {
    var iframe = $("#iframe")[0];

    if ( iframe.innerHTML() ) {
        // get and check the Title (and H tags if you want)
        var ifTitle = iframe.contentDocument.title;
        if ( ifTitle.indexOf("404")>=0 ) {
            // we have a winner! probably a 404 page!
        }
    } else {
        // didn't load
    }
});
19
Tony Chiboucas

Supposons que ce soit votre html

<html>
    <head></head>
    <body>
      <iframe id="iframe"></iframe>
    </body>
 </html>

Il y a deux scénarios

  1. Le src de votre iframe est dans le même domaine d'où votre page est originaire.

    Ex : page url www.example.com and iframe's src www.example.com/iframe

    Vous pouvez utiliser la requête jQuery ajax pour vérifier si la ressource est disponible

       $(function() {
        $.ajax({
            type : "HEAD",
            async : true,
            url : "www.example.com/iframe"
        })
        .success(function() {
            $("#iframe").attr("src", "www.example.com/iframe");
        })
        .error(function(){
           // Handle error perhaps a failover url
        })
    });

  2. Le src de votre iframe ne pointe pas vers le même domaine d'où votre page a été créée.

    Ex : Page url www.example.com and iframe's src www.otherdomain.com/iframe

    Désormais, les navigateurs ne vous permettent pas de faire une demande intersite à partir du code javascript en raison de politique d'origine croisée . La solution consiste à faire une requête jsonp .

    $(function() {
    $.ajax({
        url: "www.otherdomain.com/iframe",
        dataType: "jsonp",
        timeout: 5000,

        success: function () {
            $("#iframe").attr("src", "www.otherdomain.com/iframe");
        },
        error: function (parsedjson) {
            if(parsedjson.status == "200") {
                $("#iframe").attr("src", "www.otherdomain.com/iframe");
            } else {
                // Handle error
            }
        }
    });
});
15
mirmdasif