Erfassen Sie das Ereignis iframe load complete

Gibt es eine Möglichkeit zu erfassen, wann der Inhalt eines Iframes vollständig von der übergeordneten Seite geladen wurde?

<iframe>Elemente haben ein loadEreignis dafür.

Wie Sie diesem Ereignis zuhören, liegt bei Ihnen, aber im Allgemeinen ist der beste Weg:

1) Erstellen Sie Ihren Iframe programmgesteuert

Es stellt sicher, dass Ihr loadListener immer aufgerufen wird, indem Sie ihn anhängen, bevor der Iframe geladen wird.

<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) Inline-Javascript ist eine weitere Möglichkeit, die Sie in Ihrem HTML-Markup verwenden können.

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

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

3) Sie können den Ereignis-Listener auch nach dem Element in einem <script>Tag anhängen. Beachten Sie jedoch, dass in diesem Fall die Wahrscheinlichkeit gering ist, dass der Iframe bereits geladen ist, wenn Sie Ihren Listener hinzufügen. Daher ist es möglich, dass es nicht aufgerufen wird (z. B. wenn der Iframe sehr, sehr schnell ist oder aus dem Cache stammt).

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

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

Siehe auch meine andere Antwort über welche Elemente diese Art von loadEreignis ebenfalls auslösen können

Keine der oben genannten Antworten hat bei mir funktioniert, dies hat jedoch funktioniert

UPDATE :

Wie @doppleganger weiter unten ausgeführt hat, ist das Laden ab jQuery 3.0 weg. Hier ist eine aktualisierte Version, die verwendet wird on. Bitte beachten Sie, dass dies unter jQuery 1.7+ tatsächlich funktioniert, sodass Sie es auf diese Weise implementieren können, auch wenn Sie noch nicht unter jQuery 3.0 arbeiten.

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

Es gibt einen anderen konsistenten Weg (Hierfür gibt es in Vanilla JavaScript einen nur für IE9 + ):

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

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

Und wenn Sie an Observables interessiert sind, ist dies der Trick:

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

Beachten Sie, dass das Onload-Ereignis nicht ausgelöst zu werden scheint, wenn der Iframe außerhalb des Bildschirms geladen wird. Dies tritt häufig auf, wenn die Registerkarten "In neuem Fenster öffnen" / w verwendet werden.

Sie können jquery ready-Ereignisse auch folgendermaßen erfassen:

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

Hier ist ein Arbeitsbeispiel:

http://jsfiddle.net/ZrFzF/