Erfassen Sie das Ereignis iframe load complete

Antworten:

196

<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

gblazex
quelle
2
Danke, das macht genau das, was ich brauchte!
Jaime Garcia
1
Mit dieser Methode können Sie nur eine einzige Funktion ausführen, wenn der Iframe geladen ist. Siehe meine Antwort unten, mit addEventListenerder mehrere Rückrufe für das Ladeereignis ausgeführt werden können.
Iest
1
Dieser Ansatz ist auch anfällig für eine Race-Bedingung, da der Iframe geladen werden kann, bevor das Skript-Tag ausgeführt wird.
Iest
7
Das Ladeereignis funktioniert nicht, wenn Sie versuchen, eine Datei herunterzuladen.
Jerry
1
Ja, das funktioniert im IE nicht, wenn der iFrame-Inhalt nicht HTML ist, z. B. PDF. Siehe dies: connect.microsoft.com/IE/feedback/details/809377/…
Sergey Gussak
27

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 
});
Roryok
quelle
1
Ab jQuery 3.0 loadist weg. Bitte verwenden Sie .on('load', function() { ... })stattdessen.
Doppelgänger
Wenn Sie verwenden jqueryoder jqLitedann ist dies der richtige Weg!
Peter
11

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)
);
aitorllj93
quelle
Ist es ein handleLoad()Problem, dass mein Debugger an meinem Haltepunkt stoppt, bevor ich den iFrame-Render sehe? Ich hoffe, dass dies eher ein Rendering-Problem als ein Problem beim Laden von Inhalten ist.
Sridhar Sarnobat
Wie wäre es, dieses Ereignis mit jquery zu erfassen, wenn der Iframe bereits vorhanden ist ... dh: Der Iframe wird nicht mit jquery erstellt.
Gumuruh
3

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.

Kenneth M. Kolano
quelle
2
auch mit iframes mit Anzeige keine;)
Felipe N Moura
1

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

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

Hier ist ein Arbeitsbeispiel:

http://jsfiddle.net/ZrFzF/

Gonza Oviedo
quelle
16
Ich glaube nicht, dass dieser Code das tut, was Sie denken. Sie können diesen "#iFrame" -Selektor in Ihrer Geige durch irgendetwas ersetzen und der Alarm wird immer noch
ausgelöst
6
Zusätzlich zu @roryok wird ready ausgelöst, wenn DOM bereit ist, und nicht die gesamte Seite wird geladen.
Ivan Nikitin
1
ready wird ausgelöst, wenn das DOM bereit ist und js ausgeführt werden kann, nicht wenn der Inhalt geladen wird.
Sergey Gussak
2
$ ("# iframeid"). ready löst die Funktion aus, wenn sich das Element im dom befindet. Nicht, wenn das ifram vollständig geladen wurde.
Popsyjunior
es hat nur einmal angerufen :(
Hossein Badrnezhad