Cattura evento completo caricamento iframe

C'è un modo per catturare quando i contenuti di un iframe sono stati caricati completamente dalla pagina principale?

<iframe>gli elementi hanno un loadevento per questo.

Come ascolti quell'evento dipende da te, ma generalmente il modo migliore è:

1) crea il tuo iframe a livello di codice

Si assicura che il tuo loadlistener sia sempre chiamato collegandolo prima che l'iframe inizi a caricarsi.

<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...'; 
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>

2) javascript incorporato , è un altro modo che puoi usare all'interno del tuo markup HTML.

<script>
function onMyFrameLoad() {
  alert('myframe is loaded');
};
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

3) Puoi anche collegare il listener di eventi dopo l'elemento , all'interno di un <script>tag, ma tieni presente che in questo caso, c'è una leggera possibilità che l'iframe sia già caricato quando arrivi ad aggiungere il tuo listener. Pertanto è possibile che non venga chiamato (ad esempio se l'iframe è molto molto veloce o proviene dalla cache).

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() {
  alert('myframe is loaded');
};
</script>

Vedi anche la mia altra risposta su quali elementi possono anche generare questo tipo di loadevento

Nessuna delle risposte sopra ha funzionato per me, tuttavia questo ha funzionato

AGGIORNAMENTO :

Come indicato da @doppleganger di seguito, il caricamento è andato da jQuery 3.0, quindi ecco una versione aggiornata che utilizza on. Si noti che funzionerà effettivamente su jQuery 1.7+, quindi è possibile implementarlo in questo modo anche se non si è ancora su jQuery 3.0.

$('iframe').on('load', function() {
    // do stuff 
});

C'è un altro modo coerente ( solo per IE9 + ) in JavaScript vanilla per questo:

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

E se sei interessato agli osservabili, questo è il trucco:

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);

Si noti che l'evento onload non sembra attivarsi se l'iframe viene caricato quando è fuori schermo. Ciò si verifica spesso quando si utilizzano le schede "Apri in una nuova finestra" / w.

Puoi anche catturare l'evento pronto per jquery in questo modo:

$('#iframeid').ready(function () {
//Everything you need.
});

Ecco un esempio funzionante:

http://jsfiddle.net/ZrFzF/