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

MySql-Freigabe der Nullfunktionsnutzung

Funktionen zu Null in MySql IFNULL ISNULL NULLIF ...

Vite2.0 Fallstricke

Inhaltsverzeichnis Optimierung des Vite-Projektau...

Fünf Möglichkeiten zum automatischen Seitensprung in HTML

Im vorherigen Artikel haben wir drei gängige Meth...

Webdesign-Tutorial (2): Über Nachahmung und Plagiat

<br />Im vorherigen Artikel habe ich die Sch...

Beispiel für die Verwendung von JS zur nativen Implementierung des Jahreskarussell-Auswahleffekts

Vorwort Verwenden Sie js, um einen Jahresrotation...

TortoiseSvn Little Turtle Installation Neuestes ausführliches Grafik-Tutorial

Bei der Installation von tortoiseGit gab es immer...

Lösen Sie das Problem des Startfehlers von PHPStudy MySQL unter Windows

Einen Fehler melden Der Apache\Nginx-Dienst wurde...

Verwenden von nginx + fastcgi zum Implementieren eines Bilderkennungsservers

Hintergrund Ein spezielles Gerät wird verwendet, ...

MySQL-Methode zum Anzeigen der aktuell verwendeten Konfigurationsdatei my.cnf (empfohlen)

my.cnf ist die Konfigurationsdatei, die beim Star...

Verstehen Sie alle Aspekte von HTTP-Headern mit Bildern und Text

Was sind HTTP-Header HTTP ist eine Abkürzung für ...

Detaillierte Erläuterung des Master-Slave-Konfigurationstutorials von Redis unter Docker

1. Ziehen Sie das Redis-Image docker pull redis 2...

Detaillierte Erläuterung der MySQL-Benutzervariablen und Set-Anweisungsbeispiele

Inhaltsverzeichnis 1 Einführung in Benutzervariab...

TypeScript verwendet vscode, um den Codekompilierungsprozess zu überwachen

Installieren Installieren Sie den TS-Befehl globa...

10 Dinge, die exzellente Webentwickler wissen müssen, um ihre Entwicklungsfähigkeiten zu verbessern

„Entwicklung ist mehr als nur Code schreiben“ stam...

Die umfassendste package.json-Analyse

Inhaltsverzeichnis 1. Übersicht 2. Namensfeld 3. ...