Detailed example of HTML element blocking Flash

Detailed example of HTML element blocking Flash


Copy code
The code is as follows:

wmode parameters:
Transparent mode: You can use z-index to control the hierarchy
Opaque mode: You can use z-index to control the hierarchy
Window mode: Flash is layered above the core display window of the browser, and Flash will cover the HTML that overlaps with it.

Scenario 1 (Wmode parameter of flash can be modified)
Change the wmode property to transparent or opaque

The DEMO is as follows:


Copy code
The code is as follows:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML elements blocking Flash - Scenario 1</title>
<style>
html, body, object, embed{ ​​padding: 0; margin: 0; }
.m-box { position: relative; }</p> <p> .m-flash, .m-flash embed { width: 400px; }
.m-shadow { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: #ccc; }
</style>
</head>
<body>
<!--transparent-->
<div class="m-box">
<object class="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 class="m-shadow">
Jununx, welcome! --transparent
</div>
</div></p> <p><!--opaque-->
<div class="m-box">
<object class="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="opaque"/>
<embed wmode="opaque" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
</object></p> <p> <div class="m-shadow">
Jununx, welcome! --opaque
</div>
</div></p> <p></body>
</html>

Scenario 2 (flash wmode parameter cannot be modified) -- flash and your iframe mask are on the same page Note: If you want to be compatible with Safari and Opera, please tell them directly that this mask cannot be used.

The DEMO is as follows:


Copy code
The code is as follows:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML elements blocking Flash - Scenario 2</title>
<style>
html, body, object, embed{ ​​padding: 0; margin: 0; }
.m-box { position: relative; }</p> <p> .m-flash, .m-flash embed { width: 400px; }
.m-flash { position: relative; z-index: 1; }
.m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; }
.m-shadow-txt { position: absolute; z-index: 2; }
.m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); }
</style>
</head>
<body>
<!--window-->
<div class="m-box">
<object class="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="window"/>
<embed wmode="window" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
</object></p> <p> <div class="m-shadow">
<div class="m-shadow-txt">Jununx, welcome! --window</div>
<iframe class="m-shadow-ifr" frameborder="0"></iframe>
</div>
</div></p> <p></body>
</html>

Scenario 3 (flash's wmode parameter cannot be modified) -- Flash is introduced by an iframe page Note: If you do not have permission to operate the iframe page, please directly tell the requester that this cannot be blocked Note: If you want to be compatible with Safari and Opera, please directly tell the requester that this cannot be blocked

DEMO page:


Copy code
The code is as follows:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML elements blocking Flash - Scenario 2</title>
<style>
html, body, object, embed{ ​​padding: 0; margin: 0; }
.m-box { position: relative; }</p> <p> .m-flash { position: relative; width: 400px; height: 400px; z-index: 1; }
.m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; }
.m-shadow-txt { position: absolute; z-index: 2; }
.m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); }
</style>
</head>
<body>
<!--window-->
<div class="m-box">
<iframe class="m-flash" src="ifr.html" frameborder="0"></iframe></p> <p> <div class="m-shadow">
<div class="m-shadow-txt">Jununx, welcome! --window</div>
<iframe class="m-shadow-ifr" frameborder="0"></iframe>
</div>
</div></p> <p></body>
</html>

Iframe page:


Copy code
The code is as follows:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML elements blocking Flash - Scenario 3</title>
<style>
html, body, object, embed{ ​​padding: 0; margin: 0; }
.ifr { position: absolute; z-index: 2; width: 100px; height: 100px; opacity: 0; filter: alpha(opacity=0); }
.m-flash { position: absolute; z-index: 1; width: 400px; }
</style>
</head>
<body>
<!--window-->
<object class="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="window"/>
<embed wmode="window" 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>

<<:  Implementation code for using CSS text-emphasis to emphasize text

>>:  Detailed explanation of group by and having in MySQL

Recommend

JavaScript to implement a simple shopping form

This article shares the specific code of JavaScri...

How to write a picture as a background and a link (background picture plus link)

The picture is used as the background and the lin...

Detailed explanation of mixins in Vue.js

Mixins provide distributed reusable functionality...

Detailed tutorial on installation and configuration of nginx under Centos7

Note: The basic directory path for software insta...

Map the mouse position in CSS and control the page elements by moving the mouse (example code)

Mapping the mouse position or implementing drag e...

Implementation of k8s deployment of docker container

Environment: (docker, k8s cluster), continue with...

What are the differences between xHTML and HTML tags?

All tags must be lowercase In XHTML, all tags must...

How to use vue3+TypeScript+vue-router

Table of contents Easy to use Create a project vu...

Summary of practical experience of HTML knowledge points

1. The table tag is table, tr is row, td is cell, ...

Docker container regularly backs up the database and sends it to the specified mailbox (design idea)

Table of contents 1. Background: 2. Design ideas:...

How to recover files accidentally deleted by rm in Linux environment

Table of contents Preface Is there any hope after...

In IIS 7.5, HTML supports the include function like SHTML (add module mapping)

When I first started, I found a lot of errors. In...

Detailed steps for installing Harbor, a private Docker repository

The installation of Harbor is pretty simple, but ...

How to build a private Docker repository using Harbor

Table of contents 1. Open source warehouse manage...

WeChat Mini Programs Implement Star Rating

This article shares the specific code for WeChat ...