Richiamata Javascript al termine del caricamento di IFRAME?

Devo eseguire una richiamata quando un IFRAME ha terminato il caricamento. Non ho alcun controllo sul contenuto di IFRAME, quindi non posso attivare la richiamata da lì.

Questo IFRAME è creato a livello di codice e devo passare i suoi dati come variabile nel callback, oltre a distruggere l'iframe.

Qualche idea?

MODIFICARE:

Ecco quello che ho ora:

function xssRequest(url, callback)
{
    var iFrameObj = document.createElement('IFRAME');
    iFrameObj.src = url;            
    document.body.appendChild(iFrameObj);   

    $(iFrameObj).load(function() 
    {
        document.body.removeChild(iFrameObj);
        callback(iFrameObj.innerHTML);
    });
}

Questa richiamata prima del caricamento dell'iFrame, quindi la richiamata non ha restituito dati.

Innanzitutto, andando con il nome della funzione xssRequest sembra che tu stia provando una richiesta cross site - che se è giusto, non sarai in grado di leggere il contenuto dell'iframe.

D'altra parte, se l'URL dell'iframe si trova sul tuo dominio puoi accedere al corpo, ma ho scoperto che se uso un timeout per rimuovere l'iframe il callback funziona bene:

// possibly excessive use of jQuery - but I've got a live working example in production
$('#myUniqueID').load(function () {
  if (typeof callback == 'function') {
    callback($('body', this.contentWindow.document).html());
  }
  setTimeout(function () {$('#frameId').remove();}, 50);
});

Sto usando jQuery e sorprendentemente questo sembra caricarsi mentre ho appena testato e caricato una pagina pesante e non ho ricevuto l'avviso per alcuni secondi fino a quando non ho visto il caricamento iframe:

$('#the_iframe').load(function(){
    alert('loaded!');
});

Quindi se non vuoi usare jQuery dai un'occhiata al loro codice sorgente e vedi se questa funzione si comporta in modo diverso con gli elementi iframe DOM, lo vedrò io stesso quando sono interessato e pubblicherò qui. Inoltre ho testato solo nell'ultimo chrome.

InnerHTML del tuo iframe è vuoto perché il tag iframe non racchiude alcun contenuto nel documento principale. Per ottenere il contenuto dalla pagina a cui fa riferimento l'attributo src dell'iframe, è necessario accedere alla proprietà contentDocument dell'iframe. Verrà comunque generata un'eccezione se src proviene da un dominio diverso. Questa è una funzionalità di sicurezza che ti impedisce di eseguire JavaScript arbitrario sulla pagina di qualcun altro, creando una vulnerabilità di scripting tra siti. Ecco un esempio di codice che illustra di cosa sto parlando:

<script src="http://prototypejs.org/assets/2009/8/31/prototype.js" type="text/javascript"></script>

<h1>Parent</h1>

<script type="text/javascript">
function on_load(iframe) {
  try {
    // Displays the first 50 chars in the innerHTML of the
    // body of the page that the iframe is showing.
    // EDIT 2012-04-17: for wider support, fallback to contentWindow.document
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    alert(doc.body.innerHTML.substring(0, 50));
  } catch (e) {
    // This can happen if the src of the iframe is
    // on another domain
    alert('exception: ' + e);
  }
}
</script>
<iframe id="child" src="iframe_content.html" onload="on_load(this)"></iframe>

Per approfondire l'esempio, prova a usarlo come contenuto dell'iframe:

<h1>Child</h1>

<a href="http://www.google.com/">Google</a>

<p>Use the preceeding link to change the src of the iframe
to see what happens when the src domain is different from
that of the parent page</p>

Ho dovuto farlo in casi in cui documenti come documenti Word e PDF venivano trasmessi in streaming all'iframe e ho trovato una soluzione che funziona abbastanza bene. La chiave sta gestendo l' onreadystatechangedevento sull'iframe.

Diciamo che il nome della cornice è "myIframe". Prima da qualche parte nel tuo avvio del codice (lo faccio in linea in qualsiasi punto dopo l'iframe) aggiungi qualcosa di simile per registrare il gestore eventi:

document.getElementById('myIframe').onreadystatechange = MyIframeReadyStateChanged;

Non sono stato in grado di utilizzare un attributo onreadystatechage sull'iframe, non ricordo il perché, ma l'app doveva funzionare in IE 7 e Safari 3, quindi potrebbe essere stato un fattore.

Ecco un esempio di come ottenere lo stato completo:

function MyIframeReadyStateChanged()
{
    if(document.getElementById('myIframe').readyState == 'complete')
    {
        // Do your complete stuff here.
    }
}

Volevo nascondere il div in attesa dello spinner quando il contenuto di i frame è completamente caricato su IE, ho provato letteralmente ogni soluzione menzionata in Stackoverflow.Com, ma con niente ha funzionato come volevo.

Poi ho avuto l'idea che quando il contenuto di i frame fosse completamente caricato, l'evento $ (Window) load potesse essere generato. E questo è esattamente quello che è successo. Quindi, ho scritto questa piccola sceneggiatura e ho lavorato come per magia:

     $(window).load(function () {
     //alert("Done window ready ");
     var lblWait = document.getElementById("lblWait");
     if (lblWait != null ) {
         lblWait.style.visibility = "false";
         document.getElementById("divWait").style.display = "none";
     }
 });

Spero che questo ti aiuti.

Ho avuto un problema simile al tuo. Quello che ho fatto è che uso qualcosa chiamato jQuery. Quello che poi fai nel codice javascript è questo:

$(function(){ //this is regular jQuery code. It waits for the dom to load fully the first time you open the page.

    $("#myIframeId").load(function(){
       callback($("#myIframeId").html());
       $("#myIframeId").remove();

    });

});

Sembra che tu elimini iFrame prima di prendere l'html da esso. Ora vedo un problema con questo: p

Spero che questo ti aiuti :).

Ho un codice simile nei miei progetti che funziona bene. Adattando il mio codice alla tua funzione, una soluzione potrebbe essere la seguente:

function xssRequest(url, callback)
{
    var iFrameObj = document.createElement('IFRAME');
    iFrameObj.id = 'myUniqueID';
    document.body.appendChild(iFrameObj);       
    iFrameObj.src = url;                        

    $(iFrameObj).load(function() 
    {
        callback(window['myUniqueID'].document.body.innerHTML);
        document.body.removeChild(iFrameObj);
    });
}

Forse hai un HTML interno vuoto perché (una o entrambe le cause): 1. dovresti usarlo contro l'elemento body 2. hai rimosso l'iframe dal DOM della tua pagina

Penso che l'evento load sia giusto. Ciò che non è giusto è il modo in cui usi per recuperare il contenuto dalla dom dei contenuti iframe.

Ciò di cui hai bisogno è l'html della pagina caricata nell'iframe non l'html dell'oggetto iframe.

Quello che devi fare è accedere al documento di contenuto con iFrameObj.contentDocument . Ciò restituisce la dom della pagina caricata all'interno dell'iframe, se si trova sullo stesso dominio della pagina corrente.

Vorrei recuperare il contenuto prima di rimuovere l'iframe.

Ho testato su Firefox e Opera.

Quindi penso che puoi recuperare i tuoi dati con $(childDom).html()o$(childDom).find('some selector') ...

Ho avuto esattamente lo stesso problema in passato e l'unico modo per trovarlo è stato quello di aggiungere il callback nella pagina iframe. Ovviamente funziona solo quando hai il controllo sul contenuto di iframe.

utilizzando onload attrbute risolverà il tuo problema.

Ecco un esempio

function a() {
alert("Your iframe has been loaded");
}

<iframe src="https://stackoverflow.com" onload="a()"></iframe>

È questo che vuoi?

Clicca qui per maggiori informazioni.