Détecter si le contenu de l'iframe s'est chargé avec succès

Question

J'ai un widget qui contient une iframe. L'utilisateur peut configurer l'url de cette iframe, mais si l'url ne peut pas être chargée (elle n'existe pas ou l'utilisateur n'a pas accès à Internet), l'iframe doit basculer vers une page hors ligne par défaut.

La question est la suivante : comment puis-je détecter si l'iframe peut être chargé ou non ? J'ai essayé de souscrire à l'événement "load" et, si cet événement n'est pas déclenché après un certain temps, je bascule, mais cela ne fonctionne que dans Firefox, car IE et Chrome déclenchent l'événement "load" lorsque le message "Page Not Found" est affiché.

Answer 1

J'ai trouvé le lien suivant via Google : http://wordpressapi.com/2010/01/28/check-iframes-loaded-completely-browser/

Je ne sais pas si ça résout le problème de "Page non trouvée".

<script type="javascript">
var iframe = document.createElement("iframe");
iframe.src = "http://www.your_iframe.com/";
if (navigator.userAgent.indexOf("MSIE") > -1 && !window.opera) {
  iframe.onreadystatechange = function(){
    if (iframe.readyState == "complete"){
      alert("Iframe is now loaded.");
    }
  };
} else {
  iframe.onload = function(){
    alert("Iframe is now loaded.");
  };
}
</script>

Je ne l'ai pas essayé moi-même, donc je ne sais pas si cela fonctionne. Bonne chance !

Answer 2

De nos jours, les navigateurs ont une série de limitations de sécurité qui vous empêchent d'accéder au contenu d'un iframe (s'il n'appartient pas à votre domaine).

Si vous avez vraiment besoin de cette fonctionnalité, vous devez construire une page de serveur qui doit fonctionner comme un proxy, qui reçoit l'url comme paramètre, teste si c'est une url valide, et fait la redirection ou affiche la page d'erreur.

Answer 3

Si vous contrôlez le contenu de l'iframe, l'iframe peut envoyer un message au parent.

        parent.postMessage('iframeIsDone', '*');

Le callback parent écoute le message.

        var attachFuncEvent = "message";
        var attachFunc = window.addEventListener ;
        if (! window.addEventListener) {
            attachFunc = window.attachEvent;
            attachFuncEvent = "onmessage";
        }

        attachFunc(attachFuncEvent, function(event) {
            if (event.data ==  'iframeIsDone') { // iframe is done callback here
            }
        });

Answer 4

Comment vérifier si l'url est disponible et seulement ensuite définir l'url réelle de l'iframe ? Par exemple, avec JQuery

var url = "google.com"
var loading_url = "/empty.html"
document.getElementById("iframe").src = loading_url;
$.ajax({
    url: url,
    type: 'GET',
    complete: function(e, xhr, settings){
         if(e.status === 200){
              document.getElementById("iframe").src = url;
         }
    }
});

Modifier : Cela ne semble pas fonctionner pour les domaines croisés, le code d'état est 0 dans ces cas.

Answer 5

Si vous avez le contrôle sur le contenu de l'iframe (par exemple, vous pouvez ajouter un code arbitraire à la page), vous pouvez essayer d'implémenter une fonction spéciale dans chacun d'entre eux, puis dans votre page, vous appelez cette fonction et attrapez une erreur (par l'intermédiaire de window.onerror ) si la fonction appelée par eval échoue parce que la page n'a pas été chargée.

Voici un exemple de code : http://www.tek-tips.com/viewthread.cfm?qid=1114265&page=420