Wissen Sie, was ein iFrame ist? Es ist ein Rahmen oder ein Container, in den Sie den Inhalt einer anderen Webseite einfügen können. Mit einem iFrame können Sie mehrere Webseiten zu einer kombinieren, wodurch die Navigation des Benutzers vereinfacht und die Benutzererfahrung verbessert wird. Wenn Sie lernen möchten, wie Sie einen iFrame einrichten, hilft Ihnen diese vollständige Anleitung dabei, dies mit Leichtigkeit zu tun!
Schritt 1: Bestimmen Sie die Größe des Iframes. Sie können eine feste Größe auswählen oder ein responsives Design verwenden, um den iFrame an die Größe des Browserfensters anzupassen. Geben Sie die Breite und Höhe des Iframes mithilfe der Attribute width und height im iFrame-Tag an.
Schritt 2: Geben Sie die URL der Webseite an, die Sie in den iFrame einfügen möchten. Verwenden Sie das src-Attribut im iFrame-Tag, um die URL anzugeben. Zum Beispiel: . Sie können auch einen relativen Pfad verwenden, um eine URL anzugeben, wenn sich Webseiten in derselben Domäne befinden.
Schritt 3: Passen Sie das Aussehen des Iframes an. Sie können die Hintergrundfarbe ändern, Rahmen festlegen, dem iFrame mithilfe von CSS Schatten und andere Stile hinzufügen. Wenden Sie Klassen oder Inline-Stile auf das iFrame-Tag an, oder verwenden Sie eine CSS-Datei, um die Stile festzulegen.
Jetzt, da Sie mit den Grundlagen der iFrame-Konfiguration vertraut sind, können Sie diese Funktionalität einfach zu Ihrer Webseite hinzufügen. Ein iFrame kann ein nützliches Werkzeug sein, um Karten, Videos, Formulare und andere Elemente von anderen Webseiten einzufügen. Verwenden Sie einen iFrame, um die Benutzerfreundlichkeit Ihrer Website zu verbessern und eine interaktive Erfahrung für die Benutzer zu schaffen!
Was ist ein iFrame?
Mit einem iFrame können Sie Inhalte anderer Webseiten, Videos, Karten, Dokumente und anderer Elemente einbetten und so eine interaktive und funktionalere Benutzeroberfläche erstellen.
Ein iFrame wird mit einem Tag erstellt und erfordert die Angabe eines src-Attributs mit der URL des eingebetteten Inhalts. Die Größen eines Iframes können mit den Attributen width und height definiert werden, und das Erscheinungsbild kann mit CSS-Stilen angepasst werden.
| Attribut | Die Beschreibung |
| src | URL der eingebetteten Seite oder des Dokuments |
| width | Breite des Iframes |
| height | Höhe des Iframes |
| frameborder | iFrame-Rahmen ein- oder ausblenden (0 oder 1) |
| scrolling | Scrollen im iFrame aktivieren oder deaktivieren (auto, yes, no) |
| allowfullscreen | Vollbild für Video im iFrame zulassen (0 oder 1) |
Erstellen eines Iframes
Führen Sie die folgenden Schritte aus, um einen iFrame zu erstellen:
1. Öffnen Sie einen beliebigen Texteditor oder HTML-Editor.
2. Fügen Sie den folgenden Code in die Datei ein:
3. Ersetzen Sie die "URL" durch die Adresse der Webseite, die Sie in den iFrame laden möchten.
4. Speichern Sie die Datei mit der Erweiterung .html.
Wenn Sie die Datei jetzt in einem Webbrowser öffnen, sehen Sie einen iFrame, in dem die von Ihnen angegebene Webseite geladen wird.
Größe und Position auswählen
Wenn Sie einen iFrame einrichten, ist es wichtig, die richtige Größe und Position festzulegen, damit er auf Ihrer Website perfekt angezeigt und funktioniert. Hier finden Sie einige Tipps zur Auswahl der richtigen Größe und Position des Iframes:
1. Größe: Stellen Sie die Breite und Höhe des Iframes nach Ihren Bedürfnissen ein. Beachten Sie, dass die Größe des Iframes ausreichen sollte, um den Inhalt vollständig anzuzeigen, aber nicht zu groß ist, um einen Bildlauf der Seite zu vermeiden.
2. Speicherort: Entscheiden Sie, wo der iFrame auf Ihrer Webseite platziert werden soll. Sie können CSS-Attribute wie margin und Padding verwenden, um die Position des Iframes fein abzustimmen. Stellen Sie sicher, dass der Speicherort des Iframes andere Elemente der Webseite nicht beeinträchtigt.
3. Responsive design: Wenn die Website ein responsives Design hat, stellen Sie sicher, dass der iFrame auch anpassungsfähig ist und auf verschiedenen Geräten und Bildschirmen gut angezeigt wird. Verwenden Sie CSS-Medienabfragen, um die Größe und den Speicherort des Iframes für unterschiedliche Bildschirmauflösungen anzupassen.
4. Sicherheit: Beachten Sie, dass einige Webbrowser Iframes aufgrund potenzieller Sicherheitsrisiken blockieren können. Stellen Sie sicher, dass der iFrame eine sichere Verbindung (https) verwendet und nur vertrauenswürdigen Inhalt enthält.
Denken Sie daran, dass die richtige Auswahl der Größe und des Layouts eines Iframes die Benutzerfreundlichkeit und das Erscheinungsbild Ihrer Website erheblich verbessern kann.
Einfügen eines Iframes in eine Seite
Befolgen Sie die folgenden Schritte, um einen iFrame in eine Seite einzufügen:
- Öffnen Sie die HTML-Datei Ihrer Seite.
- Suchen Sie nach der Stelle, an der Sie den iFrame einfügen möchten.
- Erstellen Sie das Tag mit folgendem Code:
In diesem Beispiel lädt der iFrame die Seite an die Adresse "http://www.example.com " und haben eine Breite von 500 Pixeln und eine Höhe von 300 Pixeln.
Anstelle einer Adresse "http://www .example.com" Sie können jede andere Adresse der Seite angeben, die Sie in den iFrame laden möchten.
Außerdem können Sie zusätzliche iframe-Attribute wie border , Scrolling , frameborder und andere an Ihre Bedürfnisse anpassen.
Verwenden eines Tags
Ein Tag in HTML wird verwendet, um ein anderes Dokument in das aktuelle Dokument einzubetten. Es ermöglicht Ihnen, Inhalte aus einer anderen Quelle anzuzeigen, ohne zu einer neuen Seite zu wechseln.
Wenn Sie ein Tag verwenden, genügt es, seine Attribute anzugeben, z. B. src (link zum eingebetteten Dokument), width (rahmenbreite), height (höhe des Rahmens) und border (die Dicke des Rahmens).
Beispiel für die Verwendung eines Tags :
In diesem Beispiel zeigt der Rahmen den Inhalt der Seite an der Adresse an http://www.example.com mit einer Breite von 500 Pixeln und einer Höhe von 300 Pixeln. Die Dicke des Rahmens beträgt 1 Pixel.
Das Tag unterstützt auch andere Attribute wie allowfullscreen (auflösung im Vollbildmodus), scrolling (aktivieren des Bildlaufs durch den Inhalt des Rahmens) und vieles mehr.
Konfigurieren von iFrame-Optionen
Nachdem Sie einen iFrame auf Ihrer Webseite erstellt haben, müssen Sie dessen Einstellungen anpassen, um den gewünschten Effekt zu erzielen. Hier ist eine Liste der grundlegenden Parameter, die Sie anpassen können:
| Parameter | Die Beschreibung |
|---|---|
| src | Die Adresse der Webseite oder die Datei, die in den iFrame geladen werden soll. |
| width | Die Breite des Iframes in Pixel oder Prozent des übergeordneten Containers. |
| height | Die Höhe des Iframes in Pixel oder Prozent des übergeordneten Containers. |
| frameborder | Gibt an, ob iFrame-Grenzen gezeichnet werden sollen. Der Wert "0" bedeutet, dass keine Grenzen vorhanden sind, und der Wert "1" bedeutet, dass Grenzen vorhanden sind. |
| scrolling | Gibt an, ob sich die Bildlaufleisten innerhalb des Iframes befinden. Der Wert "auto" gibt an, dass der Browser automatisch entscheidet, ob Bildlaufleisten benötigt werden, der Wert "yes" zeigt an, dass sie vorhanden sind, und der Wert "no" gibt an, dass sie fehlen. |
| allowfullscreen | Gibt an, ob die Vollbildanzeige in einem iFrame zulässig ist. Der Wert "true" erlaubt den Vollbildmodus und der Wert "false" verbietet ihn. |
Um die iFrame-Parameter zu ändern, müssen Sie ihre Werte im HTML-Code der entsprechenden Webseite ändern. Um beispielsweise die Breite und Höhe eines Iframes zu ändern, ändern Sie die Attributwerte "width" und "height":
Sie können auch andere Parameter hinzufügen, indem Sie ihre Werte in den entsprechenden iFrame-Attributen angeben. Verwenden Sie beispielsweise den folgenden Code, um den Vollbildmodus zu deaktivieren und die Grenzen zu entfernen:
Mit diesen Optionen können Sie den iFrame so konfigurieren, dass er auf Ihrer Webseite angezeigt wird und die gewünschten Funktionen ausführt.
So legen Sie die URL der Quelle fest
Nachdem Sie den iFrame dimensioniert und formatiert haben, müssen Sie die URL der Quelle angeben, die darin angezeigt werden soll. Dazu müssen Sie im src-Attribut des iframe-Tags die gewünschte URL angeben.
| Attribut | Bedeutung |
|---|---|
| src | https://www.example.com |
In diesem Beispiel haben wir eine URL angegeben https://www.example.com . Ersetzen Sie es durch die gewünschte URL Ihrer Quelle. Stellen Sie sicher, dass die URL vollständig angegeben ist, einschließlich des Protokolls (z. B. https:// ).
Nachdem Sie die URL der Quelle angegeben haben, speichern Sie die Änderungen und überprüfen Sie, ob der iFrame auf Ihrer Website funktioniert. Jetzt zeigt der iFrame den Inhalt der angegebenen URL in sich selbst an.
