Das iFrame wird auch als Inlineframe bezeichnet. Es ist ein HTML-Inhalt. Das kannst Du nutzen, wenn Du beispielsweise Fremdinhalte in Deine Website einbinden willst – über ein sogenanntes Contentwindow. Das Inlineframe lädt nun den Inhalt der ursprünglichen Seite und kann diesen dann in dem Rahmen (Frame) darstellen.
Durch verschiedenste Attribute aus HTML und CSS kannst Du Deinen iFrame auch individuell anpassen – also die Größe und die Platzierung bestimmen.
Die verschiedenen Anwendungsbereiche der iFrames
Du kannst ziemlich viele Dinge mit den iFrames anstellen und sie in verschiedensten Bereichen einbinden. Gerade Google Maps oder YouTube sind zwei beliebte Felder, die immer wieder in iFrames auf Internetseiten gezeigt werden – denn so kann man Nutzern relevante Inhalte sofort zeigen, ohne sie umleiten zu müssen.
Die Alternative zu der Einbindung per iFrames wäre ein Hyperlink, aber das wird schnell umständlich und vor allem oft kompliziert und schwer zu verstehen. Die Usability der Seite erhöht sich mit iFrames erheblich! Hier macht es auch keinen Unterschied, ob man sich auf YouTube Videos oder Google Maps bezieht, denn dieser Fall trifft in beiden Optionen zu. Die User Experience steigt bei der Verwendung von iFrames und auch der Programmieraufwand nimmt ab. Alles Dinge, von denen man profitieren kann! Vor allem, weil man das gesparte Geld auch sofort in andere Bereiche investieren kann.
Dies sind die bekanntesten Beispiele von iFrames, doch auch bei der Integration von Bildern oder jeglichen HTML Codes finden sie sehr häufig Verwendung! Bilder werden im Normalfall, aber nicht immer, durch <img> Tags eingegeben. Diese Option wird jetzt allerdings immer häufiger.
Werden Bilder per HTML integriert, kann man dazu aber noch Text innerhalb eines iFrames anzeigen, was den Frame noch einmal besser in die Seite und deren Layout und Design integriert.
Sollen noch weitere Elemente im Inlineframe auftauchen, verwendet man das Attribut srcdoc=“…”, um mehr Gestaltungsfreiheit zu haben. Innerhalb der Anführungszeichen kann man jeden beliebigen HTML Code einfügen.
Wenn Du das willst, könntest Du per iFrames eine gesamte Website in eine andere einbinden. Es gibt also wirklich keine Beschränkungen für die Inhalte, die dargestellt werden. Sollte der Rahmen des Frames aber zu klein sein, muss man innerhalb des Frames scrollen. Das sieht man aber auch am Rande des iFrames, wo die bekannte Scroll-Leiste auftaucht, wenn man sie braucht.
Die zahlreiche Programmiersprachen und iFrames
Unabhängig davon, mit welcher Programmiersprache Du Dich auskennst, wirst Du mit iFrames umgehen können, denn es gibt sie in vielen Programmiersprachen. Am häufigsten werden sie mit HTML und CSS verwendet und innerhalb dieser Sprachen in die Seite eingefügt und noch angepasst. Gerade im Fall von HTML ist die Integration der iFrames enorm einfach, denn ein enorm kleiner Schnipsel an Code reicht aus – man muss ihn nur in den Quellcode integrieren.
Verwendet man HTML 5, hat man noch viel mehr Funktionen und Möglichkeiten. Hier sind gerade der Vollbild-Modus oder der Sandbox-Modus erwähnenswert. Ersteren kann man nutzen, um Videos in Vollbild mit hervorragender Auflösung abzuspielen. Die User Experience, die mit iFrames ohnehin besser ist, wird hier noch einmal erheblich gesteigert! Und das ist auch gut so.
Im Sandbox-Modus wird es für Entwickler spannend. Hier kann man dem iFrame nämlich von einem fremden Host Rechte zugestehen lassen, sodass dieser Inhalte auf der Seite ändert. Um allerdings ein Sicherheitsrisiko zu minimieren, hindern Browser die iFrames daran, etwaige Änderungen an einer Seite vorzunehmen. Das ist auch die sogenannte “Same origin policy.” Mit jQuery oder auch JavaScript kann man die iFrames aber dennoch nutzen. Wenn man zum Beispiel mit jQuery auf die Inhalte eines Frames zugreifen will, muss man die contents() Methode nutzen.
Mit Javascript kann man iFrames ebenfalls ändern oder anpassen, muss die Seite als Nutzer aber nicht neu laden. Gerade bei interaktiven Karten wird das von Google genutzt.
IFrames – ihre Vorteile und Nachteile
Während iFrames zwar sehr viele Vorteile mit sich bringen, vor allem in Sachen User Experience und Usability, gibt es auch einige Nachteile, die man berücksichtigen sollte. Im besten Fall wiegst Du beides gegeneinander ab, denn je nach Art Deines Vorhabens kann es sein, dass Du kein Inlineframe wählen solltest, weil es zu kompliziert oder zu nachteilig wird. Es ist schwer, einmal zu benennen, wann sich ein iFrame lohnt und wann nicht. Das muss man im Moment immer entscheiden.
Die großen Vorteile von iFrames
Hier gibt es vor allem zwei Punkte, die sehr relevant sind. Unter anderem kann die Programmierung mit iFrames erheblich erleichtert werden, während sie auch den Arbeitsaufwand erheblich verringern. Immerhin muss man nicht selbst ans Werk und neue Inhalte oder Funktionen erstellen, sondern kann die einfach einbinden, indem man die iFrames verwendet.
Außerdem ist fast garantiert, dass die iFrames in den meisten Fällen funktionieren – das ist ein weiterer Vorteil, den es sich zu erwähnen lohnt. Gerade bei komplizierten Funktionen ist das immerhin nicht so, wenn man sie selbst programmiert und vielleicht einen Fehler macht.
Auch die User Experience wird durch iFrames um ein großes Maß verbessert. Denn, will man auf eine externe Seite verweisen, kann man diese einfach einbinden – oder relevante Elemente, die der User sehen soll. So muss er nicht erst eine neue Seite laden, sondern hat alles an einem Ort auf einen Blick. Das sorgt für eine leichtere und unaufwändige Bedienung. Auch die Ladezeiten werden erspart, denn nun werden die Inhalte nicht in bestimmter Reihenfolge, sondern gemeinheitlich zu einer Zeit geladen! Die Seite ist folglich schneller und Nutzer geben nicht auf, wenn es zu langen Ladezeiten kommt.
Für die iFrames sprechen also, wie unkompliziert, funktional und vor allem nutzerfreundlich sie sind. Geringen Aufwand gibt’s mit iFrames!
Die großen Nachteile von iFrames
Leider gibt es bei den iFrames auch einige große Probleme und einer davon ist der Datenschutz. Der ist heutzutage besonders wichtig, aber iFrames sind fatalerweise eine potenzielle Gefahrenquelle. Gerade wenn man über die Frames Seiten aus den sozialen Medien einbindet, übermittelt man auch Daten an diese Netzwerke. Als Nutzer hat man darauf allerdings keinen Einfluss – es ist egal, ob mein eingeloggt ist, oder nicht. Solche Dienste sollte man per iFrames beispielsweise nicht einbinden, wenn es sich irgendwie vermeiden lässt.
Datenschutz ist zwar ein großes Problem, aber durch iFrames kann es auch immer wieder mal zu Sicherheitslücken kommen. Denn Hacker können angreifen, wenn der iFrame den HTML-Code einer anderen Seite herunterlädt. Sie manipulieren einfach den Code auf der Seite, die als Quelle hergenommen wird. Mehr braucht es nicht, um auf seiner Website einen schädlichen Code zu haben. Dabei sind Hacker in Sachen Sicherheitslücken nicht das einzige Problem, denn auch die Betreiber der Quell-Seite können Inhalte oder ihre URL ändern, was dafür sorgt, dass iFrames nicht mehr funktionieren oder gar falsche Inhalte anzeigen. Immerhin: Es sind Fremdartikel, die Du nicht kontrollierst. Es gibt keine Garantie, dass sie nicht verändert oder gelöscht werden.
Wenn Du also lieber auf Nummer sicher gehen willst, solltest Du iFrames eher nicht einbetten – der Sicherheit und dem Datenschutz wegen.
iFrames und deren SEO-Problematik.
Auch in Sachen Suchmaschinenoptimierung sind die iFrames leider nicht so wirklich gut. Denn die Bots von Google oder andern Suchmaschinen können die Inhalte von Inlineframes nicht lesen. Sie folgen also zwar dem Link, der sie zur Quelle bringt, aber gewertet wird der Inhalt nicht. Im schlimmsten Fall werden die Inhalte dann noch als Duplicate Content gewertet, was die Crawl Rate negativ beeinflusst und der Googlebot besucht die Seite dann seltener. Entsprechend sind auch Auswirkungen auf das Ranking kaum auszuschließen. Das ist ein großer Grund, wieso iFrames in den letzten Jahren an Popularität und dann auch noch an Relevanz verloren.
Inzwischen blocken Nutzer die Anzeige von Inlineframes, um sich vor den entstehenden Risiken zu schützen. Doch um Google Maps oder YouTube auf der Website einzubinden, ist die Verwendung der iFrames noch immer optimal und zu empfehlen. Im Endeffekt kommt es auf das Quellframe und die Einbindung des iFrame auf der eigenen Seite ein!