Détecter l'échec de charger le contenu d'une iframe

J'ai eu ce problème récemment et ont dû recourir à la mise en place d'un Javascript Interrogation sur la Page Parent (qui contient la balise IFRAME). Cette fonction JavaScript vérifie l'IFRAME du contenu explicite des éléments qui ne devrait exister que dans une BONNE réponse. Cela suppose bien sûr que vous n'avez pas à traiter avec la violation de la "même origine."

Au lieu de vérifier toutes les erreurs possibles qui pourraient être générés à partir de différentes ressources du réseau.. j'ai simplement vérifié pour une constante positive Élément(s) que je sais que devrait être une bonne réponse.

Après une pré-déterminé de temps et/ou n ° de tentatives infructueuses pour détecter les attendus Élément(s), le JavaScript modifie l'attribut SRC de l'IFRAME (à la demande de ma Servlet) une interface Utilisateur Conviviale Page d'Erreur par opposition à l'affichage de la typique message d'ERREUR HTTP. Le JavaScript pourrait tout aussi facilement modifier l'attribut SRC pour faire un tout autre demande.

function checkForContents(){
var contents=document.getElementById('myiframe').contentWindow.document
if(contents){
    alert('found contents of myiframe:' + contents);
    if(contents.documentElement){
        if(contents.documentElement.innerHTML){
            alert("Found contents: " +contents.documentElement.innerHTML);
            if(contents.documentElement.innerHTML.indexOf("FIND_ME") > -1){
                openMediumWindow("woot.html", "mypopup");
            }
        }
    }
}

}

C'est un très réponse tardive, mais je vais laisser à quelqu'un qui en a besoin.

Tâche: charge de l'iframe de la croix-origine du contenu, émettent onLoaded sur la réussite et l' onError sur erreur de chargement.

C'est la plupart des navigateurs origine indépendants solution que j'ai pu développer. Mais tout d'abord je vais raconter brièvement sur d'autres approches que j'avais et pourquoi ils sont mauvais.

1. iframe Que c'était un peu un choc pour moi, qui iframe seulement a onload événement et il est appelé sur la charge et sur l'erreur, aucun moyen de le savoir est une erreur ou pas.

2. les performances.getEntriesByType ("ressource"). Cette méthode retourne chargé des ressources. Sonne comme ce que nous avons besoin. Mais quelle honte, firefox ajoute toujours de la Ressource en ressources tableau pas de question, il est chargé ou pas. Aucun moyen de savoir par Resource avait du succès. Comme à l'habitude. Par ailleurs, cette méthode ne fonctionne pas sous ios<11.

3. script j'ai essayé de charger html à l'aide de <script> tag. Émet onload et onerror correctement, malheureusement, seulement dans le Chrome.

Et quand j'ai été prêt à tout abandonner, mon ancien collègue m'a dit à propos de html4 tag <object>. C'est comme <iframe> balise sauf qu'il y a de base lorsque le contenu n'est pas chargé. Cela ressemble à ce que nous avons besoin! Malheureusement, il n'est pas aussi facile qu'il y paraît.

SECTION DE CODE

var obj = document.createElement('object');

//we need to specify a callback (i will mention why later)
obj.innerHTML = '<div style="height:5px"><div/>'; //fallback

obj.style.display = 'block'; //so height=5px will work
obj.style.visibility = 'hidden'; //to hide before loaded

obj.data = src;

Après cela, nous pouvons définir certains attributs de <object> comme nous l'aurions voulu faire avec iframe. La seule différence, nous devons utiliser <params>, pas les attributs, mais leurs noms et les valeurs sont identiques.

for (var prop in params) {
    if (params.hasOwnProperty(prop)) {
        var param = document.createElement('param');
        param.name = prop;
        param.value = params[prop];

        obj.appendChild(param);
    }
}

Maintenant, la partie la plus difficile. Comme beaucoup même-comme les éléments, <object> n'a pas de spécifications pour les rappels, de sorte que chaque navigateur se comporte différemment.

• Chrome. Sur l'erreur et sur la charge émet load événement.
• Firefox. Émet load et error correctement.
• Safari. N'émet rien....

Semble pas différent de iframe, getEntriesByType, script....
Mais, nous avons natif du navigateur de secours! Ainsi, parce que nous avons mis de secours (innerHtml) directement, nous pouvons dire si <object> est chargé ou non

function isReallyLoaded(obj) {
    return obj.offsetHeight !== 5; //fallback height
}

/**
 * Chrome calls always, Firefox on load
 */
obj.onload = function() {
    isReallyLoaded(obj) ? onLoaded() : onError();
};

/**
 * Firefox on error
 */
obj.onerror = function() {
    onError();
};

Mais que faire avec Safari? Bon vieux setTimeout.

var interval = function() {
    if (isLoaded) { //some flag
        return;
    }

    if (hasResult(obj)) {
        if (isReallyLoaded(obj)) {
            onLoaded();
        } else {
            onError();
        }
    }

    setTimeout(interval, 100);
};

function hasResult(obj) {
    return obj.offsetHeight > 0;
}

Ouais.... pas si vite. La chose est, <object> lorsque échoue a passé sous silence dans les specs de comportement:

1. Essayer de charger (taille=0)
2. Échoue (taille = tout) vraiment
3. De secours (taille = comme dans innnerHtml)

Donc, le code a besoin d'un peu d'amélioration

var interval = function() {
    if (isLoaded) { //some flag
        return;
    }

    if (hasResult(obj)) {
        if (isReallyLoaded(obj)) {
            interval.count++;
            //needs less then 400ms to fallback
            interval.count > 4 && onLoadedResult(obj, onLoaded);
        } else {
            onErrorResult(obj, onError);
        }
    }

    setTimeout(interval, 100);
};
interval.count = 0;

setTimeout(interval, 100);

Bien, et pour commencer le chargement

document.body.appendChild(obj);

C'est tout. J'ai essayé d'expliquer le code dans chaque détail, de sorte qu'il peut ne regarde pas si stupide.

P. S. WebDev suce

Ne répond pas à votre question exactement, mais ma recherche d'une réponse m'a amené ici, donc je poste juste au cas où quelqu'un d'autre avait une requête similaire à moi.

Il n'a pas tout à fait utiliser un événement de chargement, mais il peut détecter si un site web est accessible et exigible (si elle l'est, l'iFrame, en théorie, devrait charge).

Au début, j'ai pensé à faire un appel AJAX comme tout le monde, sauf qu'il ne fonctionne pas pour moi d'abord, comme je l'avais utilisé jQuery. Il fonctionne parfaitement, si vous faites un XMLHttpRequest:

var url = http://url_to_test.com/
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status != 200) {
        console.log("iframe failed to load");
    }
};
xhttp.open("GET", url, true);
xhttp.send();

Edit:

Si cette méthode fonctionne bien, sauf qu'il a beaucoup de faux négatifs (ramasse un tas de trucs qui s'affichent dans une iframe) en raison de cross-origin malarky. Le chemin que j'ai eu autour de cette était de faire un CURL/demande Web sur un serveur, et ensuite de vérifier les en-têtes de réponse a) si le site existe, et b) si les en-têtes avait mis x-frame-options.

Ce n'est pas un problème si vous exécutez votre propre serveur, comme vous pouvez faire votre propre appel d'api pour elle.

Ma mise en œuvre dans node.js:

app.get('/iframetest',function(req,res){ //Call using /iframetest?url=url - needs to be stripped of http://or https://
   var url = req.query.url; 
    var request = require('https').request({host: url}, function(response){ //This does an https request - require('http') if you want to do a http request
        var headers = response.headers;
        if (typeof headers["x-frame-options"] != 'undefined') {
            res.send(false); //Headers don't allow iframe
        } else {
            res.send(true); //Headers don't disallow iframe
        }
    });
    request.on('error',function(e){
       res.send(false); //website unavailable
    });
    request.end();
});