Der Iframe-Frame setzt den weißen Hintergrund im IE-Browser auf transparent

Der Iframe-Frame setzt den weißen Hintergrund im IE-Browser auf transparent
In letzter Zeit muss ich im Projektverlauf häufig iframe verwenden, um das hierarchische Framework der Seite zu zeichnen. Die meisten Browser haben keinen Hintergrund, aber iframe hat im IE standardmäßig eine weiße Hintergrundfarbe. Wenn die Haupthintergrundfarbe nicht weiß ist, wird es in diesem Teil sehr abrupt angezeigt. Die Lösung finden Sie im Hilfehandbuch. Sie besteht darin, das Attribut „allowTransparent“ im Iframe auf „true“ zu setzen. Entsprechende Beispiele finden Sie auch im Hilfedokument:

Code kopieren
Der Code lautet wie folgt:

<BODY STYLE="Hintergrundfarbe: rot">
<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="transparenterBody.htm"
STYLE="Hintergrundfarbe: grün">
</IFRAME>
</BODY>

Theoretisch ist dies kein Problem, aber der Internet Explorer scheint nicht stark zu reagieren und der Hintergrund ist immer noch weiß. Tatsächlich müssen wir in diesem Schritt auch <body bgColor="transparent"> zum <body>-Tag der Unterseite hinzufügen, wie unten gezeigt:
http://img.blog.csdn.net/20140610165850968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva3VucGVuZ19tdWJhbw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

main.html-Hauptseitencode:

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<Titel></Titel>
</Kopf>
<body style="Hintergrundfarbe:blau;">
<Tabelle
Stil="Breite:100%;Rahmen:0;Höhe:100%;Zellenpolster:0;Zellenabstand:0">
<tr Höhe="100%">
<td Höhe="100%" Breite="30%">
<iframe id="test1" src="test1.html" allowTransparency="true" width="100%" height="100%"></iframe></td>
<td Höhe="100%" Breite="40%">
<iframe id="test2" src="test2.html" allowTransparency="true" width="100%" height="100%"></iframe></td>
<td Höhe="100%" Breite="30%">
<iframe id="test3" src="test3.html" width="100%" height="100%"></iframe></td>
</tr>
</Tabelle>
</body>
</html>

test1.html Seitencode:

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<Titel></Titel>
</Kopf>
<body bgcolor="transparent">
<h1>Test1</h1>
</body>
</html>

test2.html Seitencode:

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<Titel></Titel>
</Kopf>
<Text>
<h1>Test2</h1>
</body>
</html>

test3.html Seitencode:

Code kopieren
Der Code lautet wie folgt:

<html>
<Kopf>
<Titel></Titel>
</Kopf>
<Text>
<h1>Test3</h1>
</body>
</html>

In diesem kleinen Beispiel wird hauptsächlich das allowTransparency-Attribut des Iframe-Tags angewendet. Wenn dieses Attribut auf true gesetzt ist und die Hintergrundfarbe des <body>-Tags der vom Iframe geladenen Unterseite auf transparent gesetzt ist, wird der Iframe transparent.

allowTransparency legt fest oder ruft ab, ob das Objekt transparent sein kann.
bgColor Legt die Hintergrundfarbe des Objekts fest oder ruft sie ab.

<<:  Detaillierte Erklärung zur passiven Überprüfung des Überlebensstatus des Servers durch Nginx

>>:  So generieren Sie die MySQL-Primärschlüssel-ID (selbstinktive, eindeutige und unregelmäßige)

Artikel empfehlen

Ein Artikel zum Verständnis von Operatoren in ECMAScript

Inhaltsverzeichnis Unäre Operatoren Boolesche Ope...

js implementiert das Popup-Anmeldefeld durch Klicken auf das Popup-Fenster

In diesem Artikel wird der spezifische Code von j...

Aufbau einer Docker+K8S-Clusterumgebung und verteilte Anwendungsbereitstellung

1. Docker installieren yum installiere Docker #St...

Führt MySQL die Aktualisierungsanweisung erneut aus, wenn sie dieselben Daten enthält wie die ursprüngliche?

Hintergrund In diesem Artikel wird hauptsächlich ...

Detaillierte Erläuterung der Werteübertragung von Vue-Eltern-Kind-Komponenten und der Probleme beim unidirektionalen Datenfluss

Inhaltsverzeichnis Vorwort 1. Die übergeordnete K...

Reines js, um den Effekt eines Karussells zu erzielen

In diesem Artikel wird der spezifische Code von j...

Tutorial zur Installation und Verwendung von virtualenv in Deepin

virtualenv ist ein Tool zum Erstellen isolierter ...

Grafisches Tutorial zur Installation der MySQL-Datenbank und Konfiguration von Umgebungsvariablen auf dem Mac

Inhaltsverzeichnis Installieren Sie MySQL Konfigu...

Detaillierte Erläuterung der Ideen zur Leistungsoptimierung für funktionale React-Komponenten

Optimierungsideen Es gibt zwei Hauptoptimierungsr...

Flex-Layout realisiert linken Textüberlauf und lässt rechte Textanpassung aus

Ich möchte eine Situation erreichen, in der die B...

Ein kurzer Vortrag über die parasitäre Kompositionsvererbung in JavaScript

Vererbung von Kompositionen Kombinationsvererbung...

Eine Reihe häufig verwendeter Betriebs- und Wartungsbefehle für Linux (Zusammenfassung)

Inhaltsverzeichnis 1. Systemüberwachung 2. Dateio...

mysql8.0: Passwortänderung vergessen und Problem mit ungültigem Net-Befehlsdienstnamen

Geben Sie net start mysql in cmd ein und die Eing...

Detaillierte Erklärung zur Verwendung von Docker durch Deepin zur Installation einer MySQL-Datenbank

Fragen Sie zuerst die MySQL-Quelle ab Docker-Such...

So stellen Sie zabbix_agent in Docker bereit

zabbix_agent-Bereitstellung: Empfehlung: zabbix_a...