Implementieren Sie ein onload-Ereignis in iframe in JavaScript

1. Ausführen einer JavaScript-Funktion beim Laden eines iFrame
2. Implementierung beim load-Ereignis im iframe mit reinem JavaScript
3. Implementieren des on load-Ereignisses in iframe mit dem onload Event Listner
4. Verwendung von die Inline-Funktion in HTMLs onload-Ereignishandler von iframe

<iframe> steht für das Inline-Frame-Element. Dies sind Fenster, um andere Webseiten unserer Website zu laden und mit ihnen zu interagieren. Die mit iframe geladenen Sites oder Webseiten behalten ihren Sitzungsverlauf und Cache-Werte bei und sind nicht vom übergeordneten oder aufrufenden Browser-Bildschirm abhängig. Manchmal müssen wir möglicherweise eine Funktion ausführen, nachdem der iFrame-Inhalt geladen wurde. Sehen wir uns Möglichkeiten in JavaScript an, um eine Methode auszuführen, sobald der Iframe-Inhalt geladen ist.

Ausführen einer JavaScript-Funktion beim Laden eines iFrame

Wir können den Event-Handler onload des HTML-Tags iframe verwenden. Das Ereignis wird ausgelöst, sobald alle Elemente im iframe geladen sind. Dazu gehört das Laden von Skripten, Bildern, Links, Subframes etc. Es akzeptiert eine Funktionsdeklaration als Parameter, die wir im HTML-Tag erwähnen. onload="siteLoaded()" führt die Funktion siteLoaded() aus, eine einfache JavaScript-Funktion, die einen Text in die Webbrowser-Konsole protokolliert. Siehe den folgenden Code.

<iframe src="https://www.youtube.com/" onload="siteLoaded()"></iframe>

function siteLoaded() {
  console.log('iframe content loaded');
}

Ausgabe:

iframe content loaded

Implementierung beim load-Ereignis im iframe mit reinem JavaScript

Eine andere Möglichkeit, eine JavaScript-Funktion auszuführen, sobald das Laden eines iframe abgeschlossen ist, besteht darin, den Event-Handler onload von JavaScript zu verwenden. Dazu fragen wir nach dem vorgesehenen HTML-Element und hängen die JavaScript-Funktion an den Event-Handler onload des HTML-Elements an. Es ist ähnlich wie im vorherigen Abschnitt erklärt. Der Unterschied besteht darin, dass wir hier einen reinen JavaScript-Ansatz namens Unobtrusive JavaScript verwenden. Der HTML-Code ist schlank und sauber gehalten. Schauen wir uns den folgenden Code zum besseren Verständnis an.

<iframe src="https://www.youtube.com/"></iframe>

document.querySelector('iframe').addEventListener('load', function() {
  console.log('iframe content loaded');
});

Ausgabe:

iframe content loaded

Die Ausführung dieses Codes kann einen Fehler verursachen, der besagt, dass JavaScript einem Null-Objekt keinen Listener hinzufügen kann. Dazu müssen wir den Code in die Methode window.onload packen. Weitere Informationen finden Sie im folgenden Code-Snippet.

window.onload = function() {
  document.querySelector('iframe').addEventListener('load', function() {
    console.log('iframe content loaded');
  });
}

JavaScript führt die Funktion window.onload aus, sobald es alle Elemente des Fensters geladen hat. Die Funktion addEventListener() von JavaScript verknüpft einen Event-Listener mit dem HTML-Objekt. Wir müssen zuerst das HTML-Objekt auswählen, in dem wir den Ereignis-Listener hinzufügen möchten. Der document.querySelector() gibt ein HTML-Objekt zurück, an dieses Objekt hängen wir den Load-Event-Listener mit der Funktion .addEventListener() an. Der addEventListener() hängt eine Funktion an, hier eine Inline-Funktion, die ausgelöst wird, sobald das iframe-Element geladen wird. Mit der Funktion addEventListener() können wir einem HTML-Element verschiedenste Events hinzufügen. Im Rahmen unserer Diskussion konzentrieren wir uns jedoch auf das Ereignis load. Ebenso können wir das Ereignis click zu einem HTML-Objekt hinzufügen.

Implementieren des on load-Ereignisses in iframe mit dem onload Event Listner

Wie bei .addEventListener() können wir auch auf das Event onload setzen. Auch hier wählen wir das iframe-Element mit Funktionen wie document.getElementById() oder document.querySelector() aus. Sobald das Element ausgewählt ist, fügen wir ihm eine JavaScript-Funktion hinzu. Es kann auch auf verschiedene Arten erfolgen. Eine Möglichkeit besteht darin, die Funktion inline zu übergeben. Eine andere Möglichkeit besteht darin, das Funktionsobjekt anzuhängen, ohne das () zu verwenden. Wenn wir () verwenden, führt JavaScript die Funktion bei der ersten Ausführungsinstanz selbst aus. In JavaScript verwenden wir das onload allein für seinen Zweck, im Gegensatz zum .addEventListener(), das allgemeiner ist. Lesen Sie den folgenden Code, um die Verwendung der Funktion onload zu verstehen.

<iframe id="my_iframe" src="https://www.youtube.com/"></iframe>

window.onload = function() {
  document.getElementById('my_iframe').onload = function() {
    console.log('iframe content loaded');
  };
}

Wir kapseln den Codeabschnitt document.getElementById('my_iframe').onload in window.onload, nur um sicherzustellen, dass JavaScript das Element abfragen kann. Das window.onload sorgt dafür, dass alle Elemente geladen werden und stehen document.getElementById('my_iframe') zum Abrufen zur Verfügung. Sobald das Element abgefragt ist, hängen wir die Funktion mit dem Event-Handler onload des HTML-Objekts daran an.

Verwendung von die Inline-Funktion in HTMLs onload-Ereignishandler von iframe

Eine andere Möglichkeit, eine Funktion für das Load-Ereignis auszuführen, besteht darin, eine Inline-Methode in den HTML-Code einzufügen. Obwohl dies nicht die empfohlene Methode zum Implementieren einer JavaScript-Funktion bei Ladeereignissen ist, ist sie in dringenden Fällen als Hack nützlich. Bei diesem Ansatz übergeben wir die Methode inline im HTML im Funktionsattribut onload des Elements iframe. JavaScript führt die Funktion aus, sobald der iframe fertig ist. Lesen Sie den folgenden Code, um die Verwendung zu verstehen.

<iframe src="https://www.youtube.com/" onload="(function(){ console.log('iFrame Loaded'); })();"></iframe>

Ausgabe:

iFrame Loaded

Beobachten Sie, wie wir den Funktionsaufruf im Event-Handler onload schreiben. Der Inline-Funktionsaufruf ist in () eingeschlossen. Und nach dem Inline-Funktionsaufruf steht ein (). Es ist vergleichbar mit dem Anhängen einer Funktionsdeklaration an das Ereignis onclick für ein div.