iFrame ist ein eingebettetes HTML-Element, mit dem Sie Webseiten oder Dokumente in andere Seiten einbetten können. Es ist ein leistungsfähiges Werkzeug, um Inhalte aus anderen Quellen in Ihre Website oder Ihren Blog zu integrieren. Aber wie kann ich einen iFrame so konfigurieren, dass er richtig funktioniert?

Schritt 1: Bestimmen Sie die Inhaltsquelle, die Sie in den iFrame einbetten möchten. Dies kann eine beliebige Webseite oder ein Dokument sein, das über das Internet zugänglich ist.

Schritt 2: Erstellen Sie eine neue HTML-Datei oder öffnen Sie eine vorhandene Datei zum Bearbeiten. Fügen Sie den folgenden Code in das Tag ein :

Ersetzt URL auf die URL der Inhaltsquelle, die Sie in den iFrame einbetten möchten. Legen Sie die Werte für Breite und Hoehen iFrame nach Ihren Bedürfnissen.

Schritt 3: Speichern Sie die Datei mit der Erweiterung .html und öffnen Sie es in einem Webbrowser. Sie sollten Inline-Inhalte im iFrame sehen.

Beachten Sie, dass ein iFrame möglicherweise einigen Sicherheitseinschränkungen unterliegt, die sich auf Berechtigungsrichtlinien beziehen. Wenn Sie Probleme beim Herunterladen oder Anzeigen eingebetteter Inhalte haben, müssen Sie möglicherweise einige Änderungen an den Sicherheitseinstellungen Ihrer Website vornehmen oder den Serveradministrator um Hilfe bitten.

Schritt 1. Erstellen einer HTML-Datei

1. Öffnen Sie den Code-Editor und erstellen Sie eine neue Datei.

2. Geben Sie den folgenden Code ein:

Привет, мир!
Это мой iFrame.
 

3. Speichern Sie die Datei mit der Erweiterung ".html". Zum Beispiel "myiframe.html".

Jetzt haben Sie eine grundlegende HTML-Datei, in die Sie Ihren iFrame-Code einfügen können.

Schritt 2. Bestimmen der Größe eines Iframes

Nach der Installation und Konfiguration müssen Sie die Größe des Iframes bestimmen. Dies ist ein wichtiger Schritt, da die richtigen Abmessungen dazu beitragen, dass die integrierten Inhalte auf Ihrer Website korrekt angezeigt werden.

Es gibt zwei grundlegende Möglichkeiten, die Größe eines Iframes zu bestimmen:

Feste Bemaßungen: Legen Sie in diesem Fall spezifische Werte für die Breite und Höhe des Iframes fest. Sie können beispielsweise Folgendes angeben:

Wählen Sie die für Ihren Fall geeignete Methode zur Dimensionierung des Iframes aus und fahren Sie mit dem nächsten Konfigurationsschritt fort.

Schritt 3. Angeben der Quelle für einen iFrame

Nachdem Sie ein iFrame-Tag erstellt haben, ist es wichtig, die Quelle anzugeben, von der der Inhalt in den iFrame geladen wird. Dazu müssen Sie im src-Attribut die URL oder den relativen Pfad zu der Seite oder dem Dokument angeben, die im iFrame angezeigt werden soll.

Zum Beispiel, um eine Seite anzuzeigen "example.com " in einem iFrame müssen Sie den folgenden Code verwenden:

Ein Beispiel:

Anmerkung: Beachten Sie, dass die URL vollständig sein muss (mit dem Protokoll "http://" oder "https://"), um externe Inhalte herunterzuladen.

Wenn ein iFrame eine Seite von einer anderen Domäne laden soll, muss die Sicherheitsrichtlinie Same-origin policy berücksichtigt werden. In diesem Fall müssen Sie die richtigen Überschrifteneinstellungen angeben und das Tag verwenden, um die externe Seite zu laden sandbox.

Nachdem Sie die Quelle im iFrame angegeben haben, können Sie mit der Konfiguration anderer Parameter fortfahren, z. B. der Größe des Iframes, der Bildlauffunktion und anderer.

Schritt 4. Hinzufügen zusätzlicher Parameter

Sie können verschiedene Optionen verwenden, um den iFrame weiter zu konfigurieren. Zum Beispiel:

1. width - Legt die Breite des Iframes in Pixel oder Prozent fest;

2. height - Legt die Höhe des Iframes in Pixel oder Prozent fest;

3. scrolling - Gibt das Vorhandensein von Bildlaufleisten im iFrame an (mögliche Werte sind "yes" , "no" , "auto" );

4. frameborder - Legt fest, ob ein Rahmen um einen iFrame vorhanden oder nicht ist (mögliche Werte sind "1" , "0" );

5. allowfullscreen - Aktiviert oder deaktiviert den Wechsel in den Vollbildmodus;

6. sandbox - Installiert eine sichere iFrame-Laufzeitumgebung.

Beispiel für die Verwendung von Parametern:

Die angegebenen Parameter können kombiniert werden, um das gewünschte Ergebnis zu erzielen. Verwenden Sie sie, um das Aussehen und die Funktionalität Ihres Iframes zu ändern.

Schritt 5. Einschränken des Zugriffs auf einen iFrame

Um die Sicherheit und den Schutz vor möglichen Angriffen zu gewährleisten, müssen Sie den Zugriff auf den iFrame einschränken. Es gibt mehrere Methoden, mit denen Sie den Inhalt und den Zugriff auf einen iFrame steuern können:

1. Sandbox-Attribut: Fügen Sie dem iFrame-Tag ein Sandbox-Attribut hinzu. Mit diesem Attribut können Sie den Zugriff auf Funktionen und Funktionen einschränken, die auf böswillige Weise genutzt werden können. Sie können beispielsweise die Verwendung von JavaScript oder das Ausführen gefährlicher Aktivitäten verhindern. Beispiel für die Verwendung des Sandbox-Attributs:

2. Innere Sicherheit: Wenn Sie den in einem iFrame gehosteten Inhalt steuern, können Sie JavaScript für zusätzlichen Schutz und Zugriffskontrolle verwenden. Sie können beispielsweise die Autorisierung eines Benutzers überprüfen oder den Inhalt filtern.

3. Content-Richtlinien: Mithilfe von Inhaltsrichtlinien können Sie eine Reihe von Regeln festlegen, die festlegen, welche Inhalte in einen iFrame geladen werden können. Sie können beispielsweise zulassen, dass nur Inhalte von bestimmten Domänen heruntergeladen werden, oder das Herunterladen bestimmter Dateitypen blockieren.

Wählen Sie eine geeignete Methode aus, um den Zugriff auf den iFrame abhängig von Ihren Sicherheitsanforderungen und Projektanforderungen einzuschränken.

Schritt 6. iFrame-Styling

Um das Aussehen eines Iframes zu verbessern und es an Ihr Design anzupassen, müssen Sie CSS-Stile verwenden. In diesem Abschnitt werden wir einige Beispiele für die beliebtesten Stile für einen iFrame betrachten.

1. Größenänderung. Um die Größe eines Iframes zu ändern, können Sie die CSS-Eigenschaften width und height verwenden. Zum Beispiel:

2. Ändern des Rahmens. Sie können die CSS-Eigenschaft border verwenden, um den Stil eines iFrame-Rahmens zu ändern. Zum Beispiel:

3. Hintergrund ändern. Sie können die CSS-Eigenschaft background-color verwenden, um die Hintergrundfarbe eines Iframes zu ändern. Zum Beispiel:

Dies sind nur einige Beispiele für Stile für einen iFrame, Sie können sie kombinieren und sofort auf einen iFrame anwenden oder als Klasse hinzufügen und bei Bedarf verwenden. Viel Glück beim Styling Ihres Iframes!

Schritt 7. Gewährleistung der Anpassungsfähigkeit eines Iframes

Um sicherzustellen, dass Ihr iFrame anpassungsfähig ist und auf verschiedenen Geräten und Bildschirmen angemessen angezeigt werden kann, können Sie CSS-Stile verwenden.

Fügen Sie zuerst eine Klasse zu Ihrem iFrame hinzu:

Fügen Sie dann den folgenden CSS-Code hinzu:

.responsive-iframe .responsive-iframe iframe

Dieser CSS-Code legt die relative Positionierung für den iFrame fest und legt die Breite und das entsprechende Seitenverhältnis mit padding-top auf 100% fest. Es wird auch die absolute Positionierung für den iFrame selbst angegeben, so dass er sich über die gesamte verfügbare Fläche erstreckt.

Jetzt passt sich Ihr iFrame automatisch an verschiedene Bildschirme und Geräte an und behält das richtige Seitenverhältnis bei.

Schritt 8. Hinzufügen eingebetteter iFrame-Elemente

Im Moment haben Sie bereits gelernt, iFrame-Elemente zu erstellen und externe Webseiten in sie einzubetten. Abgesehen von dieser Funktionalität können Sie jedoch auch einen iFrame verwenden, um eingebettete Elemente wie YouTube-Videos, Google Maps und andere interaktive Widgets einzufügen.

Um eingebettete iFrame-Elemente hinzuzufügen, fügen Sie einfach Code in das Tag ein iframe. Normalerweise werden für jedes Widget bestimmte Tags, Daten und Parameter bereitgestellt, die in den Code eingefügt werden sollen.

Wenn Sie beispielsweise ein YouTube-Video einfügen möchten, müssen Sie den Code des integrierten Players kopieren und einfügen, den Sie auf der Videoseite finden. Bitte beachten Sie, dass Sie dazu die Option "Einbetten" unter dem YouTube-Video auswählen müssen.

Beispielcode zum Einfügen eines eingebetteten YouTube-Videos in ein iFrame-Element:

1. Kopieren Sie den Code des integrierten Players für ein bestimmtes Video:

Auf ähnliche Weise können Sie weitere Inline-Elemente hinzufügen, indem Sie den Anweisungen und dem Code für jedes Widget folgen.