Detailliertes Beispiel für die Blockierung von Flash durch HTML-Elemente

Detailliertes Beispiel für die Blockierung von Flash durch HTML-Elemente


Code kopieren
Der Code lautet wie folgt:

wmode-Parameter:
Transparenter Modus: Sie können den Z-Index verwenden, um die Hierarchie zu steuern
Opaque-Modus: Sie können den Z-Index verwenden, um die Hierarchie zu steuern
Fenstermodus: Flash wird über das Hauptanzeigefenster des Browsers gelegt und deckt das HTML ab, das sich damit überlappt.

Szenario 1 (Wmode-Parameter des Flashs kann geändert werden)
Ändern Sie die wmode-Eigenschaft auf transparent oder undurchsichtig

Die DEMO sieht wie folgt aus:


Code kopieren
Der Code lautet wie folgt:

<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>HTML-Elemente blockieren Flash – Szenario 1</title>
<Stil>
html, Body, Objekt, Einbettung{ \u200b\u200bPadding: 0; Margin: 0;}
.m-box { position: relativ; }</p> <p> .m-flash, .m-flash embed { width: 400px; }
.m-shadow { Position: absolut; oben: 0; links: 0; Breite: 100px; Höhe: 100px; Hintergrundfarbe: #ccc; }
</Stil>
</Kopf>
<Text>
<!--transparent-->
<div Klasse="m-box">
<Objektklasse="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="transparent"/>
<embed wmode="transparent" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
</object></p> <p> <div Klasse="m-shadow">
Jununx, willkommen! --transparent
</div>
</div></p> <p><!--undurchsichtig-->
<div Klasse="m-box">
<Objektklasse="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="undurchsichtig"/>
<embed wmode="undurchsichtig" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
</object></p> <p> <div Klasse="m-shadow">
Jununx, willkommen! --undurchsichtig
</div>
</div></p> <p></body>
</html>

Szenario 2 (Flash-Wmode-Parameter kann nicht geändert werden) – Flash und Ihre Iframe-Maske befinden sich auf derselben Seite. Hinweis: Wenn Sie mit Safari und Opera kompatibel sein möchten, teilen Sie ihnen bitte direkt mit, dass diese Maske nicht verwendet werden kann.

Die DEMO sieht wie folgt aus:


Code kopieren
Der Code lautet wie folgt:

<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>HTML-Elemente blockieren Flash – Szenario 2</title>
<Stil>
html, Body, Objekt, Einbettung{ \u200b\u200bPadding: 0; Margin: 0;}
.m-box { position: relativ; }</p> <p> .m-flash, .m-flash embed { width: 400px; }
.m-flash { position: relativ; z-index: 1; }
.m-shadow { Position: absolut; oben: 0; links: 0; Z-Index: 2; Breite: 100px; Höhe: 100px; Hintergrundfarbe: #ccc; }
.m-shadow-txt { position: absolut; z-index: 2; }
.m-shadow-ifr { Position: absolut; Z-Index: -1; Breite: 100 %; Höhe: 100 %; Deckkraft: 0; Filter: Alpha (Deckkraft = 0); }
</Stil>
</Kopf>
<Text>
<!--Fenster-->
<div Klasse="m-box">
<Objektklasse="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="Fenster"/>
<embed wmode="Fenster" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
</object></p> <p> <div Klasse="m-shadow">
<div class="m-shadow-txt">Jununx, willkommen! --window</div>
<iframe class="m-shadow-ifr" frameborder="0"></iframe>
</div>
</div></p> <p></body>
</html>

Szenario 3 (der Wmode-Parameter von Flash kann nicht geändert werden) – Flash wird von einer Iframe-Seite eingeführt. Hinweis: Wenn Sie keine Berechtigung zum Betreiben der Iframe-Seite haben, teilen Sie dem Anforderer bitte direkt mit, dass dies nicht blockiert werden kann. Hinweis: Wenn Sie mit Safari und Opera kompatibel sein möchten, teilen Sie dem Anforderer bitte direkt mit, dass dies nicht blockiert werden kann.

DEMO-Seite:


Code kopieren
Der Code lautet wie folgt:

<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>HTML-Elemente blockieren Flash – Szenario 2</title>
<Stil>
html, Body, Objekt, Einbettung{ \u200b\u200bPadding: 0; Margin: 0;}
.m-box { position: relativ; }</p> <p> .m-flash { position: relativ; Breite: 400px; Höhe: 400px; z-index: 1; }
.m-shadow { Position: absolut; oben: 0; links: 0; Z-Index: 2; Breite: 100px; Höhe: 100px; Hintergrundfarbe: #ccc; }
.m-shadow-txt { position: absolut; z-index: 2; }
.m-shadow-ifr { Position: absolut; Z-Index: -1; Breite: 100 %; Höhe: 100 %; Deckkraft: 0; Filter: Alpha (Deckkraft = 0); }
</Stil>
</Kopf>
<Text>
<!--Fenster-->
<div Klasse="m-box">
<iframe class="m-flash" src="ifr.html" frameborder="0"></iframe></p> <p> <div class="m-shadow">
<div class="m-shadow-txt">Jununx, willkommen! --window</div>
<iframe class="m-shadow-ifr" frameborder="0"></iframe>
</div>
</div></p> <p></body>
</html>

Iframe-Seite:


Code kopieren
Der Code lautet wie folgt:

<!doctype html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>HTML-Elemente blockieren Flash – Szenario 3</title>
<Stil>
html, Body, Objekt, Einbettung{ \u200b\u200bPadding: 0; Margin: 0;}
.ifr { Position: absolut; Z-Index: 2; Breite: 100px; Höhe: 100px; Deckkraft: 0; Filter: Alpha (Deckkraft = 0); }
.m-flash { Position: absolut; Z-Index: 1; Breite: 400px; }
</Stil>
</Kopf>
<Text>
<!--Fenster-->
<Objektklasse="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
<param name="wmode" value="Fenster"/>
<embed wmode="Fenster" src="<a href="http://www.aa.cn/i/bookmark.swf"></embed">http://www.aa.cn/i/bookmark.swf"></embed</a>>
</object></p> <p><iframe class="ifr" frameborder="0"></iframe>
</body>
</html>

<<:  Detaillierte Erklärung des verschiebbaren und bearbeitbaren Gantt-Diagramms (Highcharts können für Vue und React verwendet werden)

>>:  So erstellen Sie einen Styleguide für Ihre Website im Webinterface-Design (mit Bildern und Text)

Artikel empfehlen

Zusammenfassung zum Sharding von MySQL-Datenbanken und -Tabellen

Während der Projektentwicklung werden unsere Date...

Vollständiger Code von Vue + iView zur Realisierung der Excel-Upload-Funktion

1. HTML-Teil <Col span="2">Datei ...

Zusammenfassung der Techniken zur Implementierung komplexer Seitenlayouts mithilfe von Framesets

Code kopieren Der Code lautet wie folgt: <html...

Beispiel für eine dynamische Sperre der IP-Blacklist von Nginx

Wenn eine Website böswillig angefragt wird, ist d...

Zusammenfassung der MySQL-Datenbank-ähnlichen Anweisung zur Platzhalter-Fuzzy-Abfrage

MySQL-Fehler: Parameterindex außerhalb des gültig...

Detaillierte Einführung in Protokolle im Linux-System

Inhaltsverzeichnis 1. Logbezogene Dienste 2. Geme...

So installieren Sie OpenSuse auf Virtualbox

Die virtuelle Maschine wird auf dem Hostcomputer ...

Vue realisiert einfachen Effekt des Lauflichts

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

Schritte zum Erstellen einer Linux-Umgebung unter Windows mit VMWare (Bild und Text)

Seit ich den Mac zurückgegeben habe, liegt mein u...

React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen

Ein sehr häufiges Szenario in react -Projekten: c...

Tutorial-Diagramm zum Erstellen eines Hadoop-Hochverfügbarkeitsclusters basierend auf ZooKeeper

Inhaltsverzeichnis 1. Einführung in Hochverfügbar...

Bestimmen Sie anhand von Beispielen, ob das MySQL-Update die Tabelle sperrt

Zwei Fälle: 1. Mit Index 2. Ohne Index Voraussetz...

Einführung in den Vue-Lebenszyklus und detaillierte Erklärung der Hook-Funktionen

Inhaltsverzeichnis Einführung in den Vue-Lebenszy...

Eine kurze Diskussion über die Ausführungsreihenfolge von JavaScript-Makrotasks und Mikrotasks

Inhaltsverzeichnis 1. JavaScript ist Single-Threa...

Eine kurze Analyse der Zählverfolgung einer Anfrage in nginx

Lassen Sie mich zunächst die Anwendungsmethode er...