Iframes in HTML

Iframes in HTML sind nichts anderes als Inline-Frames, die als HTML-Dokument verwendet werden, um ein weiteres HTML-Dokument hinzuzufügen. Es wird hauptsächlich in Webseiten oder Webentwicklungsprozessen verwendet, um andere Inhalte über eine andere Quelle einzubinden, beispielsweise Werbung auf dieser Webseite.

Die meisten Webdesigner verwenden Iframe, um interaktive Anwendungen auf der Website oder Webseiten zu präsentieren. Dies wird durch die Verwendung von JavaScript oder dem Zielattribut in HTML ermöglicht.

Der Hauptzweck eines Iframes besteht darin, eine Webseite innerhalb einer anderen anzuzeigen. Der Inline-Frame sollte mit einem Tag namens

Syntax

• Jetzt werden wir sehen, wie genau Iframe verwendet wird:

<iframe src="URL"></iframe>

• Hier

Beispiel:

<iframe src="www.educba.com"></iframe>

• Es ist auch möglich, unserem Iframe wie folgt eine bestimmte Höhe und Breite im Pixelformat zuzuweisen:

<iframe src="URL" height="value" width="value"></iframe>

• In der obigen Syntax werden alle Dinge gleich sein; Darüber hinaus können wir Höhe und Breite im Pixelformat angeben und sie als
definieren

Beispiel:

<iframe src="www.educba.com" height="300" width="300"></iframe>

• Eine weitere Methode zum Definieren der Höhe und Breite des Iframes mithilfe von Werten über CSS ist in der folgenden Syntax dargestellt:

<iframe src="URL" style="height: value in pixels; width: value in pixels"></iframe>

• Alle Dinge sind die gleichen wie oben, nur mit einer Änderung bei der Angabe von Werten.

Beispiel:

<iframe src="www.educba.com" style="height:300px; width:300px;"></iframe>

• Eine weitere Funktion, die dem Iframe hinzugefügt wird, besteht darin, dass wir bereits definierte Rahmen für den Frame entfernen können, indem wir die Eigenschaft „border none“ verwenden. Die Syntax hierfür lautet wie folgt:

<iframe src="URL" style="border : none;"></iframe>

• Mit Hilfe von CSS ist es auch möglich, viele Dinge mit dem Rahmen zu tun, z. B. seine Größe zu ändern, etwas Farbe auf den Rahmen anzuwenden usw.

Der Iframe kann als Ziel für einen Link verwendet werden, indem die Syntax verwendet wird:

<iframe src="URL" name="iframe_a"></iframe>

• In der obigen Syntax ist src unsere normale URL; Hier verweist das Zielattribut des Links auf das Namensattribut in unserem Iframe-Tag.

Beispiel:

<iframe src="www.educba.com" name="iframe_a"></iframe>

Iframes-Tag-Attribut

In Iframes werden verschiedene Attribut-Tags verwendet. Diese lauten wie folgt:

• Src: Dieses Attribut wird verwendet, um eine Datei einzufügen, die in den Frame eingefügt werden muss. Die URL gibt die Zielwebseite an, die innerhalb eines Iframes geladen werden soll.
• Name: Name ist ein Attribut, das verwendet wird, um dem Rahmen einen Identifikationsnamen zu geben. Dies ist am nützlichsten, wenn Sie einen Link erstellen, um eine andere Webseite zu öffnen.
• allowfullscreen: Mit diesem Attribut können Sie Ihren Rahmen im Vollbildformat anzeigen. Wir müssen also den Wert auf „true“ setzen, damit diese Funktion ausgeführt wird.
• Frameborder: Dies ist ein hilfreiches Attribut, mit dem Sie einen Rahmen anzeigen oder nicht anzeigen können. Wert 1 soll den Rand anzeigen und 0 soll den Rand zum Rahmen nicht anzeigen.
• Randbreite: Ermöglicht Ihnen, den Abstand zwischen der linken und rechten Seite des Rahmens zu definieren.
• Randhöhe: Damit können Sie den Abstand zwischen der Ober- und Unterseite des Rahmens definieren.
• Scrollen: Diese Attribute steuern, ob die Bildlaufleiste im Frame angezeigt wird oder nicht. Die enthaltenen Werte sind „Ja“, „Nein“ oder „Auto“.
• Höhe: Wird verwendet, um die Höhe des Rahmens zu definieren. Ob in % oder Pixel
• Breite: Wird verwendet, um die Breite des Rahmens zu definieren. Ob in % oder Pixel
• Longdesc: Mit Hilfe dieses Attributs können Sie eine weitere Seite mit einer ausführlichen Beschreibung des Inhalts Ihres Frames verlinken.

Beispiele für Iframes in HTML

Hier sind einige Beispiele für Iframes in HTML, die im Folgenden erläutert werden:

Beispiel #1

Betrachten wir ein Beispiel, in dem wir zeigen, wie man einen Iframe mit einer bestimmten Höhe und Breite erstellt.

Code:

<h2 id="HTML-Iframes-Demo">HTML Iframes Demo</h2>
<p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p>
<iframe src="C:%5CUsers%5CSonali%5CDesktop%5CHTML%20block%20elements.html" height="300" width="300"></iframe>

Ausgabe:

Beispiel #2

Betrachten wir ein weiteres Beispiel, in dem wir zeigen, wie man einen Iframe mit einer bestimmten Höhe und Breite erstellt. Aber in diesem Beispiel geben wir Höhe und Breite über CSS an. Hier können wir sehen, dass die Bildlaufleiste je nach Inhaltsgröße angepasst wird.

Code:

<h2 id="HTML-Iframes-Demo">HTML Iframes Demo</h2>
<p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p>
<iframe src="C:%5CUsers%5CSonali%5CDesktop%5CHTML%20block%20elements.html" style="height:100px;width:300px;"></iframe>

Ausgabe:

Example #3

Here we are considering one example in which we will add a border to the iframe by adding some extra CSS properties to show a change in the border’s size, change in the border color, etc. So we can add as much style to our iframe.

Code:

<h2 id="HTML-Iframes-Demo">HTML Iframes Demo</h2>
<p>Here we are showing an example of Iframe which containing a border with some additional CSS proprties</p>
<iframe src="C:%5CUsers%5CSonali%5CDesktop%5Ciframe.html" style="border:3px solid Blue; height: 200px;"></iframe>

Output:

Example #4

Let’s consider another example where we will show how the target attribute opens a webpage link using an iframe.

Code:

<h2 id="Iframe-Demo-Target-for-a-Link">Iframe Demo- Target for a Link</h2>
<iframe height="200px" width="100%" src="C:%5CUsers%5CSonali%5CDesktop%5Ciframe1.html" name="iframe1_a"></iframe> <p><a href="https://www.educba.com/courses/">EDUCBA</a></p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>

Output:

Target Output:

As shown above, for example, we can click on the target link EDUCBA so that it will open the following web page shown below.

Conclusion

An iframe is an inline frame that includes another HTML document in itself. It is the most powerful HTML element for web designing. You can add content from another source. It uses different HTML attributes like Global Attributes, Event Attributes, etc.

Das obige ist der detaillierte Inhalt vonIframes in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!