Beitrag 2: Die Technik dahinter – Was genau ist ein iframe?

Beitrag 2: Die Technik dahinter – Was genau ist ein iframe?

Im ersten Beitrag haben wir euch unser Zentralmenü vorgestellt und erwähnt, dass es mithilfe eines sogenannten „iframes“ eingebunden wird. Heute wollen wir uns diese Technologie genauer ansehen. Was ist ein iframe eigentlich, wie funktioniert er, und warum wird er für unser Zentralmenü verwendet? Das Verständnis von iframes ist entscheidend, um die Funktionsweise und auch die möglichen Implikationen unseres Zentralmenüs nachzuvollziehen.

iframe: Das „Fenster“ in eine andere Welt

Das HTML-Element <iframe> steht für „Inline Frame“. Man kann es sich wie ein Fenster oder einen Rahmen vorstellen, der innerhalb einer bestehenden HTML-Seite platziert wird. Durch dieses Fenster blickt man auf eine *andere*, völlig unabhängige Webseite. Diese andere Webseite wird komplett mit ihrem eigenen HTML, CSS und JavaScript geladen und dargestellt, als wäre sie ein eigenständiges Dokument – nur eben eingebettet in die umgebende Seite.

Stellt euch vor, eure Webseite ist ein Haus. Ein iframe ist dann wie ein Fenster in diesem Haus, durch das ihr auf die Straße (eine andere Webseite) schauen könnt. Was auf der Straße passiert, ist unabhängig vom Inneren eures Hauses, aber ihr seht es von innen durch das Fenster.

Unser Zentralmenü-Code nutzt genau dieses Prinzip:

<iframe src="https://studioenns.eu/zentralmenue/home.html" ...></iframe>

Die Seite, auf der ihr euch gerade befindet (z.B. eine unserer WordPress-Seiten), ist das „Haus“. Der iframe ist das „Fenster“. Und die Seite `https://studioenns.eu/zentralmenue/home.html` ist die „Straße“ – also die separate Webseite, die nur das Menü enthält und durch das Fenster angezeigt wird.

Wie funktioniert das Laden eines iframes?

Wenn euer Browser eine Seite lädt, die einen iframe enthält, passiert Folgendes:

1. Der Browser lädt und interpretiert das HTML der Hauptseite (der „Haus“-Seite).
2. Er stößt auf das <iframe>-Tag.
3. Er liest das src-Attribut und erkennt, dass er eine weitere Ressource (die „Straßen“-Seite, also unsere `home.html`) laden muss.
4. Der Browser sendet eine separate Anfrage an den Server, auf dem die im `src`-Attribut angegebene URL liegt (in unserem Fall `studioenns.eu`).
5. Der Server liefert die `home.html` zurück.
6. Der Browser lädt und rendert diese `home.html` innerhalb des durch die `width`- und `height`-Attribute definierten Bereichs auf der Hauptseite.

Wichtig ist: Der Inhalt des iframes (die `home.html`) wird parallel oder nach dem Hauptinhalt der Seite geladen. Er hat seinen eigenen Browser-Kontext, sein eigenes `window`-Objekt und unterliegt der „Same-Origin Policy“. Das bedeutet, dass Skripte auf der Hauptseite nicht ohne Weiteres auf den Inhalt des iframes zugreifen können (und umgekehrt), besonders wenn sie von unterschiedlichen Domains stammen. Dies ist ein wichtiges Sicherheitsmerkmal, auf das wir in einem späteren Beitrag noch genauer eingehen werden.

Attribute eines iframes – Steuerung des Fensters

Wir haben die Attribute unseres Zentralmenü-iframes bereits kurz im ersten Beitrag erwähnt. Lassen Sie uns ihre Bedeutung im Kontext der iframe-Technologie vertiefen:

• src: (Source/Quelle) Definiert die URL der Seite, die im iframe angezeigt wird. Das ist das Herzstück des iframes.
• width / height: Bestimmen die Abmessungen des „Fensters“ auf der Hauptseite. Sie können in Pixeln (wie bei unserer Höhe `215`) oder Prozent (wie bei unserer Breite `100%`) angegeben werden. Diese Dimensionen sind unabhängig von der Größe des Inhalts *innerhalb* des iframes.
• scrolling: (Veraltet in HTML5, aber oft noch verwendet) Steuert, ob Scrollbalken angezeigt werden sollen (`yes`, `no`, `auto`). Mit `yes` (wie bei uns) werden Scrollbalken potenziell immer angezeigt oder zumindest der Platz dafür reserviert, falls der Inhalt die Höhe/Breite des iframes überschreitet. `auto` ist oft die Standardeinstellung moderner Browser und zeigt Scrollbalken nur bei Bedarf an. Obwohl wir `yes` verwenden, ist das Menü so gestaltet, dass unter normalen Umständen kein Scrollen nötig sein sollte.
• frameborder: (Ebenfalls veraltet in HTML5, Steuerung heute besser über CSS) Bestimmt, ob ein Rahmen um den iframe gezeichnet wird. `0` bedeutet kein Rahmen, `1` (Standard) bedeutet ein Rahmen. Wir nutzen `0` für eine nahtlose Integration.
• name: Gibt dem iframe einen Namen. Dieser kann z.B. als Ziel für Links (``) verwendet werden, um Inhalte innerhalb des iframes zu ändern, ohne die Hauptseite neu zu laden. In unserem Fall dient er eher der semantischen Kennzeichnung.
• Weitere moderne Attribute (nicht in unserem Code, aber erwähnenswert):
  • sandbox: Erlaubt es, die Rechte des iframe-Inhalts stark einzuschränken (z.B. Skriptausführung verbieten, Formularübermittlung blockieren), um die Sicherheit zu erhöhen.
  • allow: Kontrolliert den Zugriff auf bestimmte Browser-APIs (z.B. Kamera, Mikrofon, Geolocation) aus dem iframe heraus.
  • loading="lazy": Weist den Browser an, den iframe erst zu laden, wenn er in den sichtbaren Bereich des Nutzers scrollt. Das kann die anfängliche Ladezeit der Hauptseite verbessern.