Ein iframe oder Inlineframe ist ein HTML-Element, das als Frame auf einer Website platziert wird. Die Technologie wird häufig verwendet, um Werbung oder Inhalte anderer Anbieter in eine Internetseite zu integrieren. Sehr bekannt ist die Integration von Youtube-Videos mithilfe von iframes.
Inhaltsverzeichnis:
Wozu werden iframes verwendet?
Um diese Frage zu beantworten, müssen wir uns zunächst daran erinnern, was ein Frame ist. Dies ist ein separates vollständiges HTML-Dokument, das zusammen mit anderen HTML-Dokumenten in einem Browser angezeigt werden kann. Mit iframes können Sie einen herkömmlichen Frame sowie separate HTML-Dokumente auf verschiedenen Seiten einbetten. Infolgedessen wird der Inhalt einer anderen URL mit oder ohne Bildlauf auf der Website angezeigt.
Dies bedeutet, dass andere Seiten im Hintergrund geladen werden. Der Benutzer sieht solche Frames nur, wenn sie auf bestimmte Größen eingestellt sind, z. B. Bannertyp – dies ist das einfachste Beispiel für ein iframe.
Dieses Tag wird von den meisten Browsern unterstützt, aber einige Optionen funktionieren möglicherweise überhaupt nicht. Beispielsweise werden Frames nicht in Internetbrowsern gestartet, die für Sehbehinderte gestaltet sind oder in sehr alten Versionen von Internetbrowsern. Darüber hinaus werden Frames nicht nur in Webressourcen, sondern auch in Anwendungen und Programmen verwendet. Sie sind häufig nützlich für den technischen Support. Sie können die Hilfe beispielsweise öffnen, indem Sie auf die Schaltfläche „Hilfe“ klicken. Daneben wird ein allgemeines Menü angezeigt. Im Hintergrund wird ein Fenster geöffnet, das für den von Ihnen ausgewählten Informationsblock verantwortlich ist.
Wo werden die Frames verwendet?
In eingebetteten Videos, Präsentationen und anderen visuellen Inhalten. Einige Designer erstellen eine konzeptionelle Idee für die Struktur der Seite, einschließlich Hintergrundfenster, Einbettung von Animationen, Videos und anderen Medieninhalten. Darüber hinaus kann die Verwendung von iframes mit JS-gesteuerten Animationen zusammenhängen, die in einem separaten Fenster nicht so langsam arbeiten.
Fotogalerie und Chat sind normalerweise separate Dokumente, die nicht in den Text eines anderen Dokuments eingebettet werden sollten. Für die Navigation wird empfohlen, eine Sitemap und Cracker zu verwenden. Und früher oder später endet die Wicklung mit der Verwendung von Filtern.
Codierung eines Iframes – Attribute in iframes
Im Allgemeinen sollte eine iframe-Annotation immer einen Hyperlink enthalten oder Sie fügen einen Backlink hinzu, da der Inhalt auf die Quelle zurückführbar sein muss. Andere Attribute im HTML-Element sind optional und wirken sich auf das Design oder die Leistung der entsprechenden Seite aus. Die folgenden Attribute sind für iframes verfügbar, einschließlich Breite und Höhe, die sowohl in Prozent als auch in Pixel eingegeben werden können. Die Bildlaufleiste und die Rahmenbreite haben unterschiedliche Bedeutungen. Daher gelten für die Bildlaufleiste die folgenden Befehle:
+ Scrollen = “Ja” – Verwendung von Bildlaufleisten erzwingen
+ Scrolling = “no” – Bildlaufleisten unterdrücken
+ Rol scrolling = “auto” – automatisch, abhängig vom Platzbedarf (Standard)
Rahmenbreite
+ Frameborder = “0” – Der Frame ist nicht sichtbar
+ Frameborder = “1” – Der Frame ist sichtbar
Ein beliebtes Beispiel für die Integration eingebetteter Frames können YouTube-Videos sein.
Um sicherzustellen, dass der Frame korrekt gefüllt ist, werden die folgenden Attribut Codes angegeben:
Sandbox: Verbindet den integrierten Rahmen mit bestimmten Vorsichtsmaßnahmen.
src: Inhaltsquelle einbetten als URL bereitgestellt.
Höhe: Rahmenhöhe; kann in Pixel oder Prozent angegeben werden.
Breite: Rahmenbreite; kann in Pixel oder Prozent angegeben werden.
name: selbst gewählter Name eines bestimmten Frames.
srcdoc: enthält den HTML-Code, der im iframes angezeigt werden soll.
Zusätzlich zu diesen gültigen Attributen gibt es in der Praxis andere, die seit HTML5 nicht mehr unterstützt werden. Stattdessen sollten für diese Funktionen CSS-Funktionen verwendet werden.
longdesc: lange Beschreibung des Rahmens.
Randhöhe: Die Breite des oberen und unteren Randes.
Randbreite: Die Breite des linken und rechten Randes.
vspace: Der vertikale Raum um den Rahmen.
Der tatsächliche iframe-Inhalt und das Designs können daher nur über Attribute angepasst werden. Grundsätzlich enthält das Tag keinen Inhalt. In der Praxis wird dieser Bereich verwendet, um alternativen Text zu platzieren. Wenn der Browser den Frame nicht anzeigen kann, wird der Inhalt präsentiert. Normalerweise sollte dies heutzutage nicht mehr passieren. Alle modernen Browser der neuesten Version können mit dieser Technologie arbeiten. HTML-Dokumente, die sich auf dem eigenen Webserver befinden, können mithilfe des iFrame-Tags integriert werden. Dann müssen Sie die Datei und möglicherweise den Pfad nur benennen, wenn sich das Dokument nicht im selben Ordner aufhält.
Wenn Sie YouTube-Videos in Ihre Website einbetten möchten, können Sie auch Inlineframes verwenden. Die Videoplattform bietet den entsprechenden Code direkt auf der Seite des zugehörigen Videos an. Um ein iframe attraktiv zu machen, müssen Sie CSS verwenden. In den meisten Fällen bedeutet dies, dass nur der Frame selbst entwickelt werden kann. Wenn der Inhalt aus einer externen Quelle stammt, ist es sehr selten möglich, ihn an die Anzeige auf Ihrer eigenen Seite anzupassen. Mit ein paar CSS-Tricks kann ein iframe in das Responsive Design integriert werden.
Richten Sie ein Frameset ein
Frames bestehen aus einer HTML-Seite, die einen Satz von Frames definiert, sowie Seiten, die in diesen Satz von Frames geladen werden sollen. Das Attribut cols definiert die Spalten eines Framesets. Ein Beispiel: Es werden zwei Spalten bestimmt. Die erste Spalte ist 200 Pixel breit, während der zweite Frame automatisch den Rest der Breite des Browserfensters erhält. Die gleiche Syntax wird zum Festlegen von Zeichenfolgen verwendet. Zwei notwendige Frames sind in einen Satz von Frames integriert. Die verwendeten Ressourcen werden über das Attribut src definiert.
easyXDM ist eine Javascript-Bibliothek, mit der Entwickler die Einschränkungen derselben Ursprungsrichtlinie bewältigen und Anwendungen die Interaktion zwischen Domänen ermöglichen können. Jeder, der jQuery in einem Projekt verwendet, kann das NPR responsive iframe-Plugin anwenden. Iframely bietet eine umfassende API zum Einbetten von iframes. Die Basisversion ist auf Github verfügbar.
Ein letzter Hinweis: Wenn sich der iframe-Ladevorgang nicht im Ansichtsfenster befindet, sollten Sie überlegen, ob der iframe mithilfe der Methode zum verzögerten Laden geladen werden soll. Am Beispiel der lazySizes-Bibliothek ist die Integration sehr einfach. Die eigentliche Quelle (src) wird durch “data-src” ersetzt und erhält zusätzlich die Klasse “lazyload”. Das Skript lädt dann den iframe beim Scrollen neu, wenn sich der iframe dem Ansichtsfenster nähert. Dies ist jedoch mehr oder weniger nur eine zusätzliche Funktion der Bibliothek – das Hauptaugenmerk liegt auf dem verzögerten Laden adaptiver Bilder (srcset / picture). Ein Skript, das auf viele Arten verwendet werden kann.
Der Einfluss von HTML5 auf Iframes
Um Medieninhalte in Websites in den modernen HTML5-Webstandard einzubetten, gibt es den sogenannten iframe. Auf diese Weise kann der Site-Anbieter mehrere Seiten gleichzeitig anzeigen, die technisch völlig unabhängig sind. Die Verarbeitung ist sehr einfach: Sie können Videos, Karten, Präsentationen und anderen Content schnell und ohne tiefes technisches Wissen integrieren.
Ein iframe (oder „Inlineframe“ oder „Floating Frame“) ist ein separates HTML-Dokument, das in einem gesonderten Fenster zusammen mit anderen Inhalten auf der Seite in einem Browser angezeigt wird. Der Content kann überall platziert werden – seine Höhe und Breite passt sich leicht an die entsprechenden Anforderungen an. Technisch gesehen wird ein anderes HTML-Dokument in einem vorhandenen Dokument auf der Seite angezeigt. Wenn Sie eine Seite mit einem solchen iframe öffnen, wird eine andere unabhängige Seite still im Hintergrund geladen. Das heißt, der Benutzer weiß davon nichts.
Natürlich sehen wir diese Integration bereits heute, wenn wir Youtube-Videos oder Spotify-Audioplayer auf Websites betrachten und verwenden. Das Internet ist voll davon und der Benutzer bemerkt es normalerweise nicht. Live-Ticker auf Nachrichtenseiten sind üblicherweise ebenfalls mit dieser Technologie in Webseiten eingebettet. Die Integration von iframes sind somit ein wesentlicher Bestandteil des modernen Internets und ein weitverbreitetes Standardwerkzeug. Da es vom Originaldokument isoliert ist, ist es auch eine besonders sichere Methode zum Rendern von dynamischem Inhalt.
Tatsächlich gibt es nur zwei Nachteile: Zum anderen ist der Datenaustausch zwischen einer Website und einem integrierten Element nicht möglich, zum anderen sind iframes für sogenannte Webcrawler nicht sichtbar. Crawler sind Programme, die im Internet nach unterschiedlichen Zielen und differenten Kriterien suchen. Google verwendet diese für seine Suchmaschine. Google Crawler indiziert und „versteht“ nur den Inhalt, der sich tatsächlich auf der Website befindet. Somit wirkt sich die Einbettung nicht positiv auf die Effektivität der SEO-Website aus (aber auch nicht negativ).
Inhaltsformate bieten verschiedene Optionen für die Integration von Content in die Website. Sie können eine beliebige Anzahl von Eingliederungen aus diversen Kanälen und Mixen verwenden, um unterschiedliche Inhalte auf abweichenden Websites zu integrieren. Auf diese Weise können Sie eine Struktur anpassen, die Ihren Anforderungen entspricht und Ihre Website automatisch mit dem richtigen Inhalt versorgt.
Mit Kopieren und Einfügen kann es problemlos in jeden CMS-Online-Editor kopiert werden. Das Code-Snippet erleichtert auch das Bestimmen der Höhe und Breite eines Elements. Auf diese Weise können Sie das Erscheinungsbild und die Benutzererfahrung der Website auf einfache Weise beeinflussen.
Wofür verwenden Sie es?
Auf den ersten Blick ähneln die Funktionen den sogenannten sozialen Netzwerken. Eine Social-Networking-Wand sammelt und filtert Inhalte aus sozialen Netzwerken wie Twitter, Instagram, Facebook und YouTube. iframes werden häufig auf Webseiten von Unternehmen, auf Produktseiten von E-Commerce-Websites oder auf digitalen Bildschirmen in Büros, auf der Straße oder bei Live-Veranstaltungen angezeigt oder integriert. Inhalte, die normalerweise nur in sozialen Netzwerken funktionieren, können auf einfache und unkomplizierte Weise für andere Zielgruppen zugänglich gemacht werden.
iframes ersparen Ihnen einige der Nachteile der Frame-Set-Technik. Sie bieten auch den Vorteil, dass sie einen bestimmten Inhalt einzeln verknüpfen können, was bei der Navigation von Vorteil sein kann. Die folgenden Nachteile bleiben jedoch bestehen:
Der aufrufende iframe weiß nichts über die visuelle Größe des eingebetteten Dokuments. Daher muss ein angemessener Anhang mithilfe von CSS gesteuert werden. Beim Navigieren in einem Dokument über die Tastatur ist eine zusätzliche Tabulatortaste erforderlich.
Bei Verwendung von regulären HTML-Frames, die nicht mehr zum HTML-Sprachbereich gehören, ist die gesamte Website in einer Frame-Struktur aufgebaut. Damit ist das Browserfenster vollständig in Bereiche unterteilt, die aus externen HTML-Dokumenten bestehen. Inline-Frames hingegen werden nur in bestimmte Areale eines vorhandenen HTML-Dokuments eingebettet. Im Gegensatz zu normalen Frames kann die Größe vom Benutzer nicht ohne zusätzliche Tools, Attribute oder Javascript geändert werden.
Der Vorteil ist, dass der Browser sowohl für integrierte als auch für reguläre Frames die Größe und nicht die Zeit zum Entwerfen und Laden des Inhalts des iframes berücksichtigt. Da der (integrierte) iframe das parallele Laden von Inhalten ermöglicht, wird die umgebende Seite möglicherweise bereits angezeigt, während der Frame-Inhalt noch geladen wird.
Ein als iframe eingebettetes Dokument kann zusammen mit dem umgebenden Text gescrollt werden. Inlineframes können jedoch auch eigene Bildlaufleisten haben, wenn dies aufgrund der Größe des Inline-Dokuments erforderlich ist. Die Rahmentechnologie zeigt nur die Adresse der umgebenden Internetseite in der Adressleiste des Browsers an. Dies macht es schwierig, die verknüpfte Seite als Lesezeichen ohne die einschließende Webseite zu speichern.
Als Besucher wissen Sie nicht, wann Sie den Content einer Website verlassen und dann die andere Seite betreten. Somit kann der Inhalt der Seite fälschlicherweise einer anderen Quelle zugeordnet werden – aus Sicht des Bedieners kann dies wünschenswert sein. iframes können verwendet werden, um schädlichen Code mithilfe von Cross-Site-Scripting einzufügen.
Im Gegensatz dazu gibt es Frames, die zu einem geteilten Bildschirm führen. iframes haben die gleichen Nachteile wie gewöhnlichen Frames und eignen sich daher besser zur Integration externer Inhalte.
Vor- und Nachteile von Iframs
Integrierte Frames sind nützlich, wenn Sie Elemente aus externen Quellen in Ihre Seite aufnehmen möchten. Anstatt den Benutzer an eine andere Domain zu senden, kann er weiterhin auf der Seite surfen. Dies verbessert die Benutzerfreundlichkeit erheblich. Darüber hinaus kann die Integration auch einen technischen Vorteil haben. iframe-Inhalte werden unabhängig vom Rest der Internetseite geladen. Somit wird dem Benutzer Inhalt bereitgestellt, obwohl nicht jedes Seitenelement bereits geladen ist.
Inlineframes verlieren tatsächlich an Bedeutung, da das Verfahren einige Nachteile aufweist. Eingebettete Elemente werden von Suchmaschinen nicht ordnungsgemäß verarbeitet. Dies kann die Suchmaschinenoptimierung und folglich das Site-Ranking beeinflussen. Das mit iframes verbundene Sicherheitsrisiko ist jedoch viel schwerwiegender: Wenn Sie externe Inhalte einbetten, kann dies auch das System des Benutzers negativ beeinflussen. Der Inhalt eines iFrames kann beispielsweise ein böswilliges Plug-in enthalten oder Phishing betreiben – ohne den Website-Betreiber zu benachrichtigen.
In letzter Zeit wurden iframes wiederholt diskutiert, um Daten zu schützen. Integrierte Frames werden häufig für Plug-ins in sozialen Netzwerken verwendet. Einige von ihnen beziehen sich auf Benutzerdaten – auch wenn Website-Besucher nicht mit den Schaltflächen „Gefällt mir“ oder „Teilen“ interagieren und nicht Teil der entsprechenden Community sind.
iframes wurden Ende des letzten Jahrtausends intensiv genutzt, als Anbieter selten serverseitige Optionen zum Erstellen von Websites anboten. Das hat sich heute geändert. Heutzutage bieten fast alle Anbieter mindestens eine Serversprache an, wodurch der traditionelle Bedarf überflüssig wird. Benutzer können Unterseiten nicht mit Bookmarks versehen, weil Browser nur die Adresse des aufrufenden Frames anzeigen, können unerfahrene Browserbenutzer diese nicht speichern.
Iframes und die Suchmaschinenoptimierung
Das Einbetten von Frames in Ihre eigene Website kann zu Problemen für Suchmaschinen führen, da sie „nicht zum grundlegenden Internetmodell passen“. Gemäß dem von Google beschriebenen Modell ist normalerweise nur eine URL pro Seite verfügbar. Auf Seiten die iframes verwenden, werden auf einer einzelnen Webseite jedoch mehrere URLs angezeigt (eine für jeden verwendeten Frame). Google selbst postuliert einen Versuch der Website von der die Frames stammen – Inhalte mit Frames zuzuweisen garantiert dies allerdings nicht. Im schlimmsten Fall wird eine Internetseite mit einem Frame für Suchmaschinen unsichtbar. Sie kann daher nicht mehr in ihr Ranking aufgenommen werden – dies gilt es bei der Suchmaschinenoptimierung unbedingt zu vermeiden. Daher ist es ratsam, iFrames nicht zu missbrauchen.
Frames wurden häufig verwendet, um auf Webseiten eine Navigation zu erstellen und den Inhalt zu teilen. Dies kann für den Benutzer sinnvoll sein. Suchmaschinen haben jedoch Probleme mit Frames und iframes. Außerdem sehen Besucher, die eine Seite über eine Suchmaschine eingeben, nur eine Seite und nicht den gesamten Satz von Frames. Dies bedeutet, dass die Navigation oft nicht möglich ist und viele Besucher die Website wieder verlassen.
Frames und iframes spielen seit Langem eine Rolle bei der Erstellung von Websites. Gleichzeitig sind Frames und iframes zu finden, wo iframes weiterhin zur Integration externer Inhalte, wie Youtube-Videos verwendet werden.
Verschiedene Suchmaschinen behandeln Frames unterschiedlich. Dies erschwert die Suchmaschinenoptimierung, da alle Fälle berücksichtigt werden müssen. Zumindest suchen die meisten Suchmaschinen nicht nur nach FrameSets, sondern auch nach einzelnen Frames, sodass die gesamte Site durchsucht und indiziert wird, wenn sie richtig konfiguriert ist.
Eine Optimierung ist auch mit Frames möglich. Folgende Grundregeln sind zu beachten:
+ Schreiben Sie gute, aussagekräftige Texte in den NoFrame-Bereich
+ Schreiben Sie wie auf normalen Seiten eine gute Beschreibung und Überschrift.
+ Erstellen Sie eine Sitemap.
+ Darüber hinaus müssen Sie ein kleines Skript auf separaten Seiten des Frames installieren, damit Besucher automatisch zum Frame-Set geleitet werden und die gesamte Interseite sehen können.
Fazit
Ein iframe ist ein rechteckiges HTML-Element, das heutzutage auf vielen Websites verwendet wird. Dank dieser Technologie können Ihre eigenen Tchop-Inhalte und -Ausgaben flexibel und dynamisch in jede gewünschte Position auf der Website eingebettet werden. Das iframe verhält sich wie ein kleines Browserfenster und liefert Tchop-Inhalte im Kontext seiner eigenen Website. Die Integration ist schnell, einfach und sicher. Jeder kann iframes mit einem kurzen Code und Attribut in seine Website integrieren. Die Möglichkeiten für Inhalte sind nahezu unbegrenzt – die Fantasie kennt hier keine Grenzen. In vielen Fällen kann der gewünschte Effekt auch mit anderen Methoden wie CSS oder JavaScript erzielt werden.
