iFrame

Ein iFrame (Inline Frame) ist ein HTML-Element, das eine Webseite in eine andere einbettet. Definiert durch das `<iframe>`-Tag, erstellt es ein unabhängiges rechteckiges Fenster innerhalb deiner Seite, das Inhalte von einer separaten URL lädt und anzeigt. Der eingebettete Inhalt behält seinen eigenen Dokumentkontext — mit separatem DOM, Styles und Scripts — isoliert von der Hostseite. iFrames werden breit eingesetzt, um Videos, Karten, Formulare, Zahlungs-Gateways und interaktive Widgets einzubetten, ohne dass die Hostseite den Code oder das Styling dieses Inhalts direkt verwalten muss.

Für digitale Verleger bieten iFrames den einfachsten und universellsten Weg, ein interaktives [Flipbook](/glossary/flipbook) oder einen Dokumenten-Viewer direkt auf einer bestehenden Website zu platzieren. Besucher können die Publikation durchblättern, ohne die Seite zu verlassen, was sie auf deiner Website engagiert hält, anstatt sie zu einem Drittanbieter-Link weiterzuleiten. Dies verbessert die Verweildauer, reduziert die [Absprungrate](/glossary/bounce-rate) und integriert das Leseerlebnis nahtlos in dein bestehendes Design. Da iFrames eine native HTML-Funktion sind, die von jedem modernen Browser unterstützt wird, funktionieren sie mit WordPress, Shopify, Squarespace, individuell codierten Seiten und praktisch jedem CMS.

FlipLink generiert einen gebrauchsfertigen iFrame-[Einbettungscode](/glossary/embed-code) für jedes veröffentlichte [Flipbook](/glossary/flipbook) und Dokument. Du kopierst das Einbettungs-Snippet aus deinem FlipLink-Dashboard und fügst es in den HTML-Code deiner Website, den CMS-Editor oder den Landing-Page-Builder ein. Der iFrame lädt den vollständigen FlipLink-Viewer — einschließlich [Seitenumblätter-Animationen](/glossary/page-flip-animation), [CTA-Buttons](/glossary/call-to-action-cta), [Lead-Capture-Formulare](/glossary/lead-capture) und [Analytics-Tracking](/glossary/analytics-dashboard) — in den von dir angegebenen Dimensionen. FlipLinks [responsive Einbettung](/features/sharing-and-distribution) stellt sicher, dass sich der iFrame automatisch an jede Bildschirmgröße anpasst. FlipLink bietet auch eine [klickbare Bild-Einbettung](/features/clickable-image-embed) als leichtgewichtige Alternative an, die zum vollständigen Viewer verlinkt.

Eine iFrame-Einbettung verwendet diese grundlegende HTML-Struktur: ```html <iframe src="https://go.fliplink.me/your-flipbook" width="100%" height="600" frameborder="0" allowfullscreen> </iframe> ``` Wichtige Attribute, die das Verhalten beeinflussen: - **`src`** — Die URL des einzubettenden Inhalts. FlipLink stellt diese URL für jede Publikation bereit. - **`width` / `height`** — Steuert den sichtbaren Bereich. FlipLinks responsiver Einbettungscode verwendet prozentuale Breiten für flexible Layouts. - **`sandbox`** — Beschränkt, was der eingebettete Inhalt tun kann (z.B. Formulare, Scripts oder Popups blockieren). FlipLinks Einbettungscode ist so konfiguriert, dass die für volle Funktionalität benötigten Interaktionen erlaubt sind. - **`loading="lazy"`** — Verzögert das Laden des iFrames, bis der Benutzer in die Nähe scrollt, was die anfängliche Seitenladegeschwindigkeit verbessert. - **`allow`** — Legt Feature-Berechtigungen fest wie den Vollbildmodus, den FlipLink für immersives Lesen nutzt.

iFrames führen eine Vertrauensgrenze zwischen der Hostseite und dem eingebetteten Inhalt ein. Das Verständnis des Sicherheitsmodells hilft dir, Inhalte sicher einzubetten: - **Same-Origin-Policy** — Browser verhindern, dass die Hostseite auf das DOM eines Cross-Origin-iFrames zugreift und umgekehrt. Deine Website kann die Interna des FlipLink-Viewers weder lesen noch manipulieren, und der eingebettete Viewer kann nicht auf die Cookies oder Daten deiner Website zugreifen. - **[Domain-Whitelisting](/glossary/domain-whitelisting)** — FlipLink ermöglicht es dir, einzuschränken, welche Domains deine Publikationen einbetten dürfen, und verhindert, dass nicht autorisierte Websites deine Inhalte in eigenen iFrames anzeigen. - **Content Security Policy (CSP)** — Wenn deine Website strenge CSP-Header verwendet, musst du möglicherweise FlipLinks Domain zu deiner `frame-src`-Direktive hinzufügen, um das Laden des iFrames zu erlauben. - **Clickjacking-Schutz** — FlipLink setzt entsprechende `X-Frame-Options`- und CSP-Header, um zu kontrollieren, wo der Viewer eingebettet werden kann, während deine autorisierten Domains zugelassen werden.

**"iFrames sind schlecht für SEO."** Suchmaschinen können Links innerhalb von iFrames folgen und den eingebetteten Inhalt separat indexieren, aber der Inhalt trägt nicht zum SEO-Ranking der Hostseite bei. Für Flipbooks ist das kein Problem — der SEO-Wert liegt in den eigenen Inhalten, Überschriften und Metadaten deiner Seite, während das Flipbook als Engagement-Tool dient. **"iFrames verlangsamen immer meine Seite."** Ein iFrame selbst verursacht minimalen Overhead. Leistungsprobleme entstehen durch das, was der iFrame lädt. Die Verwendung von `loading="lazy"` stellt sicher, dass das Flipbook erst geladen wird, wenn der Benutzer dorthin scrollt, sodass der anfängliche Seitenaufbau schnell bleibt. **"iFrames sind veraltete Technologie."** Während einige Legacy-Nutzungen von iFrames (wie der Aufbau von Seitenlayouts) tatsächlich veraltet sind, bleibt iFrame-basierte Einbettung der Standard für Drittanbieter-Widgets, Zahlungsformulare und interaktive Inhalte. Jede große Plattform — YouTube, Google Maps, Stripe und FlipLink — nutzt iFrames zur Einbettung.

Ein iFrame ist die standardmäßige, sichere Methode zur Einbettung interaktiver Inhalte wie Flipbooks auf jeder Website. Er bietet volle Funktionalität und hält dabei den eingebetteten Inhalt isoliert vom Code und den Styles der Hostseite.