web-dev-qa-db-fra.com

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

J'ai un widget qui contient un iframe. L'utilisateur peut configurer l'URL de cet iframe, mais si l'URL n'a pas pu ê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, comment puis-je détecter si l'iframe peut être chargé ou non? J'ai essayé de m'abonner à 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éclenche l'événement 'load' lorsque la "Page non trouvée" est affichée.

javascriptjavascript-eventscross-domain
31
Javier Orellana

De nos jours, les navigateurs ont une série de limitations de sécurité qui vous éloignent du contenu d'un iframe (s'il ne s'agit pas de votre domaine).

Si vous avez vraiment besoin de cette fonctionnalité, vous devez créer une page de serveur qui doit fonctionner en tant que proxy, recevoir l'URL en tant que paramètre, tester si c'est une URL valide et faire la redirection ou afficher la page d'erreur.

7
Adilson de Almeida Jr

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

Je ne sais pas si cela résout le problème "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 ça marche. Bonne chance!

14
RobinBrouwer

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

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

Le rappel 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
            }
        });
4
Henry

Que diriez-vous de vérifier si l'url est disponible et ensuite de 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 entre les domaines, le code d'état est 0 dans ces cas.

2
Jens Timmerman

Si vous avez le contrôle sur le contenu de l'iframe (par exemple, vous pouvez ajouter du code arbitraire à la page), vous pouvez essayer d'implémenter une fonction spéciale dans chacun d'eux, puis dans votre page, vous appelez cette fonction et attrapez une erreur (via window.onerror handler) si la fonction appelée via eval échoue car la page ne s'est pas chargée.

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

0
DVK

Une fois la décharge déclenchée, vous pouvez nettoyer le contenu de l'iframe pour voir s'il contient une page utile ou non. Vous devrez malheureusement spécifier ce navigateur car ils affichent tous un message "page introuvable" différent.

Pour plus d'informations, jetez un œil ici à http://roneiv.wordpress.com/2008/01/18/get-the-content-of-an-iframe-in-javascript-crossbrowser-solution-for -both-ie-et-firefox /

0
Bitsplitter