Veranstaltungen via iFrame auf der eigenen Webseite auspielen

iFrames: Das Fenster zu anderen Inhalten & Websites

In der Welt des Webdesigns gibt es ein mächtiges Werkzeug, das es ermöglicht, externe Inhalte nahtlos in eine Website zu integrieren: iFrames. Aber was genau ist ein iFrame und wie kann man es geschickt in eine Homepage einbinden? In diesem Artikel werfen wir einen Blick auf diese nützliche Technologie.

Was ist ein iFrame?

Ein iFrame (kurz für “Inline Frame” oder “integriertes Frame”) ist ein HTML-Element, das es ermöglicht, eine separate Webseite oder ein Dokument in eine andere Webseite einzubetten. Es handelt sich dabei um rechteckige Container, die externe Inhalte wie eine andere Webseite, ein Video, eine Karte, ganze Web-Based-Trainings wie auf der KiLAG Homepage oder aber Veranstaltungen vom BiK anzeigen können.

Struktur von Inlineframes

iFrames werden innerhalb des HTML-Codes durch das <iframe>-Tag erstellt. Hier sind die wichtigsten Attribute für iFrames:

src: Die Quelle des einzubettenden Inhalts (meist eine URL).
width: Die Breite des Frames (in Pixeln oder Prozent).
height: Die Höhe des Frames (in Pixeln oder Prozent).
name: Eine selbstgewählte Bezeichnung für den spezifischen Frame.
sandbox: Verbindet den iFrame mit bestimmten Sicherheitsvorkehrungen.
srcdoc: Enthält HTML-Code, der im iFrame angezeigt werden soll.

Verwendung von iFrames

Fügen Sie das <iframe>-Tag an der gewünschten Stelle in Ihrem HTML-Dokument ein.
Passen Sie die Attribute entsprechend an, um den eingebetteten Inhalt zu steuern.
Beachten Sie, dass iFrames auch für Werbung oder Inhalte anderer Anbieter auf Ihrer Website verwendet werden können.

Der Iframecode, um Veranstaltungen aus dem BiK in andere Homepages zu integrieren lautet:

Die eigene Suche, eigene Veranstaltungen oder alle lokalen Veranstaltungen ausspielen:

Veranstaltungen aus dem BiK können beliebig gefiltert werden. Die Stichwortsuche funktioniert dabei additiv, das heißt, bei klar definierten und einer Veranstaltung zuordnenbare Stichwörtern werden einzelne Veranstaltungen filterbar und gemeinsam angezeigt. Sind so die richtigen Veranstaltungen zusammengestellt, einfach die Webadresse aus dem Browser über die rechte Maustaste kopieren und in das Iframe einsetzen. Hierbei einfach im oben gezeigten Iframecode alles nach dem ersten Anführungszeichen " bis zu dem Code: ASC ersetzen. Die Codierung: &iframe=true sorgt dafür, dass aus dem Bildungsportal nur noch die Veranstaltungen ausgespielt werden und nicht mehr die ganze Seite inkl. Suchfilter und Header.

Hier ist noch ein Video, das wir zu diesem Thema vorbereitet haben:

Verfasst von:

Oliver Streppel

Was bewegt mich dazu als Autor in diesem Blog etwas zu veröffentlichen? Mich treibt eine Frage immerzu an: Wie mache ich Bildung interessanter. Als studierter Medienpädagoge, gelernter Film- und Mediendesigner, zertifizierter Blended-Learning-Designer, Autor, Bildungsreferent bei der Evangelischen Erwachsenen- und Familienbildung, als Vater von Vier Kindern und Hörspielfan habe ich ein breites Spektrum an Interessen und Hintergrundwissen, das ich immer wieder gerne dafür einsetze dieser Frage nachzugehen. Falls Du über eine Frage stolperst, die wir gerne gemeinsam auf den Grund gehen wollen, dann nur gerne her damit.