Détecter si le contenu iframe a été chargé avec succès

Question

J'ai un widget qui contient un iframe. L'utilisateur peut configurer l'URL de cette iframe, mais si l'URL n'a pas pu être chargée (elle n'existe pas ou si l'utilisateur n'a pas accès à Internet), l'iframe doit basculer vers une page hors connexion par défaut. La question est, comment puis-je détecter si le 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 basculerai, mais cela ne fonctionne que dans Firefox, puisque IE et Chrome lancent l'évènement 'load' quand la page est introuvable. affiché.

Answer 1

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 serveur qui doit fonctionner en tant que proxy, recevoir l'url en tant que paramètre, tester si elle est valide et rediriger ou afficher l'erreur page.

Answer 2

Si vous contrôlez 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'entre eux, puis dans votre page, vous appelez cette fonction une erreur (via le gestionnaire window.onerror) si la fonction appelée via eval échoue car la page n'a pas été chargée.

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

Answer 3

Après les feux de onload, vous pouvez récupérer le contenu de l'iframe pour voir si elle contient une page ou non utile. Vous devez malheureusement spécifier ce navigateur car ils affichent tous un message "page non trouvée" différent.

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

Answer 4

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

Je ne sais pas si elle résout le problème « Page introuvable ».

<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 n'ai pas essayé moi-même, donc je ne sais pas si cela fonctionne. Bonne chance!

Answer 5

Que diriez-vous de vérifier si l'URL est disponible et seulement alors établissant 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; 
     } 
    } 
}); 

Edit: Cela ne semble pas fonctionner inter-domaines, le code d'état est 0 dans ces cas.

Answer 6

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

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

Le rappel parent est à l'écoute du 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 
      } 
     });