javascript - you - Rileva se il contenuto dell'iframe è stato caricato correttamente




you must enable javascript to view this page (4)

Ho un widget che contiene un iframe. L'utente può configurare l'url di questo iframe, ma se l'url non può essere caricato (non esiste o l'utente non ha accesso a internet) allora l'iframe dovrebbe eseguire il failover su una pagina offline predefinita.

La domanda è, come posso rilevare se l'iframe potrebbe essere caricato o no? Ho provato ad iscrivermi all'evento "load" e, se questo evento non viene attivato dopo un po 'di tempo, eseguo il failover, ma funziona solo in Firefox, poiché IE e Chrome attivano l'evento "load" quando "Page Not Found" è visualizzato.


Che ne dici di controllare se l'url è disponibile e solo dopo aver impostato l'url effettivo dell'iframe? ad es. con 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;
         }
    }
});

Modifica: questo non sembra funzionare su più domini, in questi casi il codice di stato è 0.



Oggigiorno i browser hanno una serie di limiti di sicurezza che ti tengono lontano dal contenuto di un iframe (se non è del tuo dominio).

Se hai davvero bisogno di questa funzionalità, devi costruire una pagina del server che deve funzionare come proxy, che riceve l'url come parametro, verifica se è un url valido e reindirizza o visualizza la pagina di errore.


Se controlli il contenuto dell'iframe, l'iframe può inviare un messaggio al genitore.

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

La richiamata genitore ascolta il messaggio.

        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
            }
        });




cross-domain