Detaillierte Erklärung zur Verwendung des Iframe-Tags (Attribute, Transparenz, adaptive Höhe)

Detaillierte Erklärung zur Verwendung des Iframe-Tags (Attribute, Transparenz, adaptive Höhe)

1. Iframe-Definition und -Verwendung

 Das Iframe-Element erstellt einen Inline-Frame (oder Inline-Frame), der ein anderes Dokument enthält.

Unterschiede zwischen HTML und XHTML

 In HTML 4.1 Strict DTD und XHTML 1.0 Strict DTD wird das Iframe-Element nicht unterstützt.

Tipps und Hinweise:

 Tipp: Sie können den erforderlichen Text zwischen <iframe> und </iframe> einfügen, um mit Browsern zurechtzukommen, die keine Iframes verstehen.

Iframe-Tags erscheinen paarweise, beginnend mit <iframe> und endend mit </iframe>

Der Inhalt im Iframe-Tag kann angezeigt werden, wenn der Browser das Iframe-Tag nicht unterstützt

Eigentum

Eigentum Wert beschreiben DTD
ausrichten
  • links
  • Rechts
  • Spitze
  • Mitte
  • unten

Veraltet. Bitte verwenden Sie stattdessen Stile.

Gibt an, wie dieser Rahmen im Hinblick auf die umgebenden Elemente ausgerichtet wird.

 TF
Rahmenrand
  • 1
  • 0
 Gibt an, ob ein Rahmen um den Rahmen angezeigt werden soll TF
Höhe
  • Pixel
  • %
 Gibt die Höhe des Iframes an. TF
langerBeschreibung URL Gibt eine Seite an, die eine längere Beschreibung des Iframes enthält. TF
Randhöhe Pixel Definiert die oberen und unteren Ränder des Iframes. TF
Randbreite Pixel Definiert den linken und rechten Rand des Iframes. TF
Name Rahmenname Gibt den Namen des Iframes an. TF
Scrollen
  • Ja
  • NEIN
  • Auto
 Gibt an, ob im Iframe Bildlaufleisten angezeigt werden sollen. TF
Quelle URL Gibt die URL des Dokuments an, das im IFrame angezeigt werden soll. TF
Breite
  • Pixel
  • %
 Definiert die Breite des Iframes. TF

Beispiel


Code kopieren
Der Code lautet wie folgt:

<iframe src="https://www.jb51.net" width="200" height="500">
123WORDPRESS.COM verwendet Frame-Technologie, Ihr Browser unterstützt jedoch keine Frames. Bitte aktualisieren Sie Ihren Browser, um normal auf 123WORDPRESS.COM zugreifen zu können.
</iframe>

Definieren Sie die Iframe-Größe in Pixeln

Code kopieren
Der Code lautet wie folgt:

<iframe src="http://www.baidu.com" width="20%" height="50%">
123WORDPRESS.COM verwendet Frame-Technologie, Ihr Browser unterstützt jedoch keine Frames. Bitte aktualisieren Sie Ihren Browser, um normal auf 123WORDPRESS.COM zugreifen zu können.
</iframe>

Definieren Sie die Iframe-Framegröße in Prozent

2. Iframe-Transparenz

Im <body>-Tag der Datei transparentBody.htm habe ich style="background-color=transparent" hinzugefügt. Durch die folgenden vier IFRAME-Schreibmethoden sollten Sie meiner Meinung nach ein klares Verständnis davon haben, wie Sie den transparenten Hintergrundeffekt von iframe erzielen:


Code kopieren
Der Code lautet wie folgt:

<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="Hintergrundfarbe: grün"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="Hintergrundfarbe: grün"> </IFRAME>


Iframes werden nur als letztes Mittel verwendet, da die Verwendung von Iframes mehr Probleme verursacht und einige Browser so eingestellt werden können, dass sie Iframes als Anzeigen blockieren.

Ich habe bei einer meiner letzten Arbeiten Iframes verwendet. Das Problem, auf das ich am Anfang gestoßen bin, war das Problem der hohen Anpassungsfähigkeit von Iframes. Eine Lösung für dieses Problem habe ich im Blog des UED-Teams von Koubei.com gefunden. Später bin ich auf ein Problem mit der Transparenz von Iframes gestoßen.

Normalerweise ist die Hintergrundfarbe des Iframes weiß, sie kann jedoch in verschiedenen Browsern unterschiedliche Farben haben.

Wenn die Hauptseite eine durchgehende Hintergrundfarbe oder ein Hintergrundbild hat

Im Iframe-Bereich wird ein weißer Block angezeigt, der nicht mit der Hauptseite übereinstimmt. Daher muss der Iframe transparent sein.

Ich habe eine Lösung gefunden, indem ich bei Google nach Iframe-Transparenz gesucht habe

Code kopieren
Der Code lautet wie folgt:

<iframe src="./ads_top_tian.html" allowtransparency="true" style="background-color=transparent" title="test" frameborder="0" width="470" height="308" scrolling="no"></iframe> Voraussetzung ist natürlich, dass auf der Iframe-Seite keine Farbe festgelegt ist.
[Code]
Hinweis: Für die Transparenz von iFrames wird hauptsächlich allowtransparency="true" style="background-color=transparent" verwendet.
3. Adaptive Höhe des Iframes
</strong>Da der Artikel zu lang ist, können Sie hierher gehen, um ihn anzuzeigen
<a target="_blank" href="https://www.jb51.net/article/15780.htm">https://www.jb51.net/article/15780.htm</a>
4. Iframe-Anzeigencode über js ausgeben
</strong>[Code]
Dokument.schreiben('<iframe align=middle marginwidth=0 marginheight=0 src="http://img.jb51.net/imgby/468_1.htm" frameborder=no scrolling=no width=660 height=80></iframe>');


5. Manchmal müssen wir berücksichtigen, ob der Browser des Benutzers das Iframe-Tag unterstützt. Daher müssen wir es wie folgt schreiben


Code kopieren
Der Code lautet wie folgt:

<iframe frameborder="0" name="Iframe1" src="https://www.jb51.net/" width="100%" height="200">
Ihr Browser unterstützt keine Iframes oder ist derzeit so konfiguriert, dass keine Iframes angezeigt werden.
</iframe>

<<:  Lassen Sie uns im Detail darüber sprechen, wie Browser Abschlüsse betrachten

>>:  Detaillierter Prozess zur Verwendung von Nginx zum Erstellen eines WebDAV-Dateiservers in Ubuntu

Artikel empfehlen

Warum MySQL-Datenbanken NULL so weit wie möglich vermeiden

Viele Tabellen in MySQL enthalten Spalten, die NU...

Detaillierte Erklärung der neuen Funktion ROLE in MySQL 8

Welche Probleme löst MySQL ROLE? Wenn Sie ein DBA...

So stellen Sie npm so ein, dass Pakete aus mehreren Paketquellen gleichzeitig geladen werden

Inhaltsverzeichnis 1. Lokalen Speicher erstellen ...

Tutorial zum Erstellen einer VSCode+CMake+Clang+GCC-Umgebung unter Win10

Ich möchte C/C++ verwenden, um grundlegende Daten...

CSS zum Erzielen eines dynamischen Schaltflächeneffekts mit Partikeln

Ursprünglicher Link https://github.com/XboxYan/no...

So verwenden Sie Linux-Befehle in IDEA

Im Vergleich zum Windows-System bietet das Linux-...

So deinstallieren Sie MySQL vollständig unter CentOS

Dieser Artikel dokumentiert die vollständige Dein...

Schritte zum Erstellen der MHA-Architekturbereitstellung in MySQL

Inhaltsverzeichnis MAH 1. Einführung in die MAH-A...

Ursachen und Lösungen für Verzögerungen bei der MySQL-Master-Slave-Synchronisierung

Aus historischen Gründen basiert die MySQL-Replik...

Eine kurze Analyse der Verwendung der Coredump-Technologie zur Ermittlung der Ursache von Prozessabstürzen in Linux

Vor kurzem ist im Projekt ein Problem aufgetreten...

Vollständige MySQL-Lernhinweise

Inhaltsverzeichnis MyISAM und InnoDB Gründe für L...

So implementieren Sie adaptive Container mit gleichem Seitenverhältnis mit CSS

Als ich kürzlich eine mobile Seite entwickelte, s...

IE6/7 wird ein Chaos: Problem mit der Höhe leerer Textknoten

Vorwort: Verwenden Sie die Debugleiste, um den Dok...

Beispielanalyse der von MySQL 5.7 generierten Spaltennutzung

Dieser Artikel veranschaulicht anhand von Beispie...

Das Prinzip und die Konfiguration des Nginx-Lastausgleichs sowie der dynamischen und statischen Trennung

Inhaltsverzeichnis 1. Nginx implementiert das Las...