Alternativen zu Iframe in HTML

Subodh Poudel 19 Februar 2023
  1. Verwendung von das Tag object als Alternative zu Iframe in HTML
  2. Verwendung von das embed-Tag als Alternative zu Iframe in HTML
Alternativen zu Iframe in HTML

In HTML verwenden wir die Iframes, um einen Inline-Frame anzugeben, über den wir eine Webseite in eine Webseite einbetten können. In diesem Tutorial stellen wir einige andere Alternativen zu Iframe vor, um Webseiten anzuzeigen.

Verwendung von das Tag object als Alternative zu Iframe in HTML

Wir können das object-Tag in HTML verwenden, um externe Ressourcen in die Webseite einzubetten. Wir können das Tag verwenden, um eine andere Webseite in unserer Webseite anzuzeigen. Das object-Tag ist eine Alternative zum iframe-Tag in HTML. Wir können das Tag verwenden, um verschiedene Multimediakomponenten wie Bild, Video, Audio usw. einzubetten. Das Tag object hat ein Attribut data, mit dem wir die URL der einzubettenden Webseite definieren können. Mit den Attributen width und height können wir sogar die Breite und Höhe des Containers festlegen.

Schreiben Sie zum Beispiel das Tag object und setzen Sie im Attribut data die URL https://theuselessweb.com/. Setzen Sie dann die Attribute width und height des object-Tags auf 800. Als nächstes setzen Sie das Attribut type auf text/html. Schliessen Sie zum Schluss das object-Tag.

Wenn wir die folgende Webseite im Browser laden, können wir die eingebettete Webseite in einem Container sehen. Wir können mit der eingebetteten Webseite interagieren. Der Typ text/html zeigt an, dass es sich bei dem eingebetteten Inhalt um HTML handelt. Auf diese Weise können wir das object-Tag verwenden, um eine Webseite in eine Webseite einzubetten, was eine Alternative zum iframe-Tag in HTML ist. Es ist jedoch besser, das Tag iframe anstelle des Tags object zu verwenden.

Beispielcode:

<object data="https://theuselessweb.com/"
width="800"
height="800"
type="text/html">
</object>

Verwendung von das embed-Tag als Alternative zu Iframe in HTML

Das Tag embed ähnelt dem Tag object und wird für denselben Zweck verwendet. Mit dem Tag embed können wir verschiedene externe Ressourcen in unsere Webseite einbetten. Wir können Medien wie PDF, Bild, Audio, Video und Webseiten einbetten. Das Tag definiert einen Container, in den wir unseren gewünschten Inhalt einbetten können. Das embed-Tag ist ein selbstschließendes Tag. Mit dem Attribut src können wir die URL der einzubettenden Webseite angeben. Das Tag hat ein type-Attribut, um den Typ des einzubettenden Inhalts anzugeben. Auf ähnliche Weise können wir Höhe und Breite definieren, genauso wie beim object-Tag.

Schreiben Sie zum Beispiel das Tag embed und setzen Sie das Attribut type auf text/html. Schreiben Sie als nächstes das Attribut src und setzen Sie es auf https://theuselessweb.com/. Stellen Sie dann Höhe und Breite des Behälters auf 500 und 800 ein.

Die Messung von Höhe und Breite erfolgt in Pixeln. Auf diese Weise können wir das embed-Tag als Alternative zum iframe-Tag in HTML verwenden. Empfehlenswert ist jedoch das iframe-Tag anstelle des embed-Tags.

Beispielcode:

<embed type="text/html" src="https://theuselessweb.com/" width="800" height="500">
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn