Iframes sind HTML-Elemente, mit denen Sie externe Inhalte wie Webseiten in eine aktuelle Seite einbetten können. In diesem Artikel zeigen wir Ihnen, wie Sie den Inhalt von zwei oder mehr Iframes mit einer einzigen Schaltfläche mit JavaScript ändern können.

Was ist ein iFrame?

Ein Iframe ist ein HTML-Element, das externe Inhalte in eine Webseite einbetten kann. Sie können das Etikett verwenden um eine Webseite, ein Video, ein Dokument oder andere Multimedia-Inhalte auf Ihrer Website einzubetten. Die Grundstruktur eines Iframes ist wie folgt:

Durch die Verwendung von JavaScript können Sie den Inhalt von iFrames dynamisch ändern und so ein interaktiveres und nahtloseres Benutzererlebnis bieten.

Beispiel für das Ändern des Inhalts mehrerer Iframes von einer Schaltfläche aus

Im folgenden Beispiel zeigen wir, wie man den Inhalt von drei Iframes mit einem einzigen Button per JavaScript ändert:

function changeContent() {
document.getElementById("iframe1").src = "neue_Seite1.html";
document.getElementById("iframe2").src = "neue_Seite2.html";
document.getElementById("iframe3").src = "neue_Seite3.html";
//MEHR HINZUFÜGEN FRAMES FALLS ERFORDERLICH, ÄNDERN SIE EINFACH DIE ID UND DIE URL
}

Ändern Sie den Inhalt von zwei oder mehr Iframes von einer Schaltfläche aus

In diesem Beispiel haben wir drei Iframes mit IDs erstellt iframe1, iframe2 Und ifram3 das einbetten Seite1.html, Seite2.html Und Seite3.html bzw. Als Nächstes haben wir eine Schaltfläche erstellt, die, wenn sie angeklickt wird, die Funktion ausführt changeContent(). Diese Funktion verwendet getElementById() um jeden Iframe auszuwählen und sein Attribut zu ändern Quelle zu den neuen Seiten neue_seite1.html, neue_seite2.html Und neue_seite2.html.