---
title: "iFrames auf Ihrer statischen Website verwenden - Simply Static"
description: "iFrames gibt es seit den frühen Tagen des Internets. Sie können den Inhalt einer anderen Website auf Ihrer eigenen Website einbetten. Obwohl sich die"
date: "2022-11-14T11:45:12+02:00"
language: "de-DE"
canonical_url: "https://simplystatic.de/tutorials/iframe-statische-website/"
source_url: "https://simplystatic.de/tutorials/iframe-statische-website/"
content_type: "text/markdown"
---
# iFrames auf Ihrer statischen Website verwenden
[Simply Static](https://simplystatic.de/tutorials/tag/simply-static-de/)
21/09/2026
Inhaltsverzeichnis
iFrames gibt es seit den frühen Tagen des Internets. Sie können den Inhalt einer anderen Website auf Ihrer eigenen Website einbetten. Obwohl sich die Implementierung und Interpretation von iFrames in verschiedenen Browsern mehrfach geändert hat (meist aus Sicherheitsgründen), sind sie nach wie vor eine gute und einfache Möglichkeit, externe Inhalte einzubetten.
## So verwenden Sie ein iFrame
Das Hinzufügen eines iFrames ist ganz einfach. Es handelt sich lediglich um ein kurzes HTML-Tag, das in WordPress folgendermaßen verwendet werden kann:
```
```
### Zusätzliche Parameter für iFrames
In meinem obigen Beispiel habe ich bereits width und height als Parameter hinzugefügt, um das iFrame anzupassen. Einige weitere Parameter ermöglichen es Ihnen, das Erscheinungsbild der eingebetteten Website noch weiter anzupassen.
#### allowfullscreen
Dieser Parameter ermöglicht es Besuchern, das eingebettete iFrame im Vollbildmodus anzuzeigen.
```
```
#### loading
In der Regel blockieren iFrames das Rendern. Das bedeutet, dass sie die Seitengeschwindigkeit beeinträchtigen. Daher gibt es jetzt einen loading-Parameter, der auf lazy gesetzt werden kann. Auf diese Weise wird der Inhalt im Hintergrund geladen und beeinträchtigt Ihre Website nicht mehr.
```
```
Eine Liste aller verfügbaren Parameter finden Sie [hier](https://www.w3schools.com/tags/tag_iframe.ASP).
### Probleme mit iFrames
Auf Servern und in Browsern gibt es standardmäßig einige Sicherheitsbeschränkungen, um den Missbrauch von iFrames zum Diebstahl von Inhalten zu verhindern. Daher sind möglicherweise einige zusätzliche Schritte erforderlich, damit dies für Sie funktioniert.
Dies ist ein ziemlich umfangreiches Thema. Deshalb empfehle ich, die Grundlagen in den [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) nachzulesen.
Möglicherweise müssen Sie Ihren Server so anpassen, dass Cross-Origin-Anfragen von Ihrer statischen Website an Ihre dynamische Website zugelassen werden. [Simply Static Pro](https://simplystatic.de/) erledigt bereits einige dieser Aufgaben für Sie, bestimmte Dinge müssen jedoch direkt auf Serverebene vorgenommen werden.
### Warum sollten Sie iFrames auf Ihrer statischen Website verwenden?
Der Hauptgrund für die Verwendung von iFrames auf Ihrer statischen Website besteht darin, dynamische Bereiche funktionsfähig zu machen.
Viele WordPress-Plugins sind aufgrund ihrer Abhängigkeit von Ajax nicht für statische Websites optimiert. Zwar gibt es für verschiedene Plugins stets funktionierende Alternativen, aber fast immer gibt es mindestens eines, das ohne Ajax auskommt und für statische Websites optimiert ist.
iFrames sind eine großartige Möglichkeit, Ajax-Funktionalität in Ihre statische Website einzubetten und Ihre dynamische Website zur Verarbeitung dieser Anfragen zu verwenden.
### Advanced iFrames
Wenn das Experimentieren mit HTML nicht Ihr Ding ist, ist das ebenfalls kein Problem. Im w.org-Repository ist ein leistungsstarkes kostenloses Plugin namens [Advanced Iframes](https://wordpress.org/plugins/advanced-iframe/) verfügbar. Damit können Sie alles oben Erwähnte und noch mehr umsetzen (zum Beispiel nur bestimmte Bereiche Ihrer Website innerhalb des iFrames anzeigen).
## Ajax – Was ist das und warum wird es verwendet?
Ajax ist eine Möglichkeit, Teile Ihrer Website dynamisch zu aktualisieren, ohne einen vollständigen Reload der gesamten Website zu erzwingen. Dies ist heutzutage weit verbreitet, da es Besuchern eine bessere UX bietet.
Ich habe dieses kleine Bild gefunden, das zeigt, wie das Konzept von Ajax technisch funktioniert:
[](https://simplystatic.de/wp-content/uploads/2022/11/AJAX-how-works.png)Credits: ClickIT –[ Ajax Technique and jQuery Methods](https://www.clickittech.com/developer/ajax-technique-and-jquery-methods/)
Ajax-Ereignisse werden im Frontend ausgelöst, indem ein Ereignis gestartet wird. Dieses Ereignis kann ein Klick auf eine Schaltfläche, das Absenden eines Formulars oder jede andere Interaktion mit der Seite sein. Anschließend werden Daten von Ihrem Browser (über JavaScript) an den Server gesendet, wo PHP die Übermittlung verarbeitet und schließlich Daten an den Browser zurückgibt.
Sie sehen diese Methoden häufig in Formular-Plugins und bei Funktionen wie „Load More“ oder zum Aktivieren einer Live-Suche mit automatischen Vorschlägen auf Ihrer Website.
## Elementor Forms – ein praktisches Beispiel
[Elementor](https://elementor.com/) ist der beliebteste Page Builder für WordPress. Elementor Pro enthält außerdem ein [Formularmodul](https://elementor.com/features/form-builder/), mit dem Sie Formulare in Ihre Website einbetten können, ohne ein zusätzliches Formular-Plugin zu benötigen. Das ist ideal, wenn Sie lediglich einfache Formulare benötigen.
[](https://simplystatic.de/wp-content/uploads/2022/11/elementor-forms.png)
### Das Formular einrichten
Ich habe eine einfache WordPress-Website mit installiertem Elementor und Elementor Pro eingerichtet und das Formularmodul zu einer Seite hinzugefügt. Ich habe hier keine besonderen Einstellungen vorgenommen, sondern einfach ein ganz grundlegendes Formular mit Name, E-Mail-Adresse und Nachricht verwendet.
[](https://simplystatic.de/wp-content/uploads/2022/11/elementor-form.png)
### Das iframe einrichten
Nun habe ich eine neue Seite erstellt und das iframe hinzugefügt. Die Quelle des iframes verweist auf die URL der Elementor-Formularseite.
[](https://simplystatic.de/wp-content/uploads/2022/11/elementor-iframe.png)
### Die ursprüngliche Seite aus dem iFrame ausschließen
Jetzt haben wir zwei Seiten mit demselben Inhalt. Eine enthält den ursprünglichen Inhalt, die andere bindet die Seite einfach innerhalb eines iframes ein. Nun schließen wir die ursprüngliche Seite aus dem statischen Export aus. Gehe zu Simply Static -> Settings -> General->Exclude und schließe die URL aus:
[](https://simplystatic.de/wp-content/uploads/2023/07/simply-static-exclude-elementor-form-page.png)
Das war’s. Verlinke unbedingt auf die Seite mit dem iframe und schließe die Seite mit dem Formular in Simply Static aus.
Starte einen neuen statischen Export in Simply Static – und schon bist du startklar. Simply Static ersetzt die src-Werte von iFrames nicht, damit dies funktioniert (du musst dir darüber also keine Gedanken machen!).
### CSS nur auf Seiten anwenden, die innerhalb eines iframes geladen werden
Ich habe bereits das Plugin Advanced iFrame erwähnt, mit dem sich nur Teile deiner Seite innerhalb eines iFrames anzeigen lassen. Wenn du dafür kein Plugin verwenden möchtest, findest du hier ein kleines Code-Snippet, mit dem du CSS nur dann in die Seite einfügen kannst, wenn sie als iFrame geladen wird.
[](https://ray.so/?title=&theme=breeze&spacing=64&background=true&darkMode=true&code=PD9waHAKICAKYWRkX2FjdGlvbignd3BfZm9vdGVyJywgZnVuY3Rpb24oKXsKPz4KPHNjcmlwdD4KalF1ZXJ5KGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbiggJCApIHsKIGlmICh3aW5kb3cuc2VsZiAhPSB3aW5kb3cudG9wKSB7CiAgICAkKGRvY3VtZW50LmJvZHkpLmFkZENsYXNzKCJpbi1pZnJhbWUiKTsKICB9Cn0pOwo8L3NjcmlwdD4KPD9waHAKfSk7CiAgCiAg&language=php)
Dieses kleine Code-Snippet fügt dem Body deiner Seite die Klasse „in-iframe“ hinzu, sobald sie innerhalb eines iframes geladen wird. So kannst du ganz einfach CSS darauf anwenden und die Seite anpassen.
In unserem Beispiel mit Elementor Forms möchten wir möglicherweise den Header und Footer ausblenden und nur das Formular anzeigen:
[](https://simplystatic.de/wp-content/uploads/2022/11/elementor-hide.png)
Damit dies nur auf den Header innerhalb eines iframes angewendet wird, kombinieren wir es mit der Präfixklasse „in-iframe“. Dafür habe ich in Elementor ein kleines Code-Snippet wie folgt hinzugefügt:
[](https://simplystatic.de/wp-content/uploads/2022/11/elementor-code-snippet.png)
Nun kannst du beliebig viele CSS-Stile hinzufügen, um die eingebettete Seite innerhalb eines iframes zu verändern. Das Entfernen des Headers hat für mein kleines Beispiel bereits ein ziemlich gutes Ergebnis erzielt, aber passe die Seite gerne noch weiter an deine Bedürfnisse an.
### WordPress-Sicherheits-Workbook
Registriere dich und erhalte unser praxisnahes **WordPress-Sicherheits-Workbook** direkt als Download in dein Postfach.
#### Vielen Dank!
Du hast dich erfolgreich für unseren Newsletter angemeldet.
Inhaltsverzeichnis