Object-covered div solution: objectdiv Solution

Object-covered div solution: objectdiv Solution

Recently I made a web project, because there is a <object> plug-in, and the <div> dialog box will be overwritten. I made a <iframe> tag, overwrite <object>, and then put a <div> dialog box on iframe. This is the solution to this problem. I finally solved this problem. I will share my ideas with you for your reference.

(1) first, we will introduce the object tag: W3school.

Definition and usage

Defines an embedded object. Use this element to add multimedia to your XHTML page. This element allows you to specify the data and parameters of objects inserted into the HTML document, as well as code that can be used to display and manipulate data.

<Object> tags are used to include objects, such as images, audios, videos, Java applets, ActiveX, PDF, and Flash.

The original intention of the object is to replace the img and applet elements. However, this is not implemented due to vulnerabilities and lack of browser support.

The support for browser objects depends on the object type. Unfortunately, mainstream browsers use different codes to load the same object type.

Fortunately, the object provides a solution. If the object element is not displayed, the code between <object> and </object> is executed. In this way, we can nest Multiple object elements (each corresponding to a browser ).

In general, the object tag is used to embed multimedia.

(2) briefly introduce the important attributes of several object tags:

Classid -- associate an application and the unique id of the application executing the embedded content in windows (this id cannot be changed; otherwise, an exception occurs ),

For example clsid: D27CDB6E-AE6D-11cf-96B8-444553540000 -- Flash

Data -- specifies the URL of the resource used by the object.

(3) object tag coverage on IE

After querying related resources, you can find that <object> is a window element in IE. These elements are always rendered above non-window elements, while iframe is on the object by default, the only solution is to use iframe as the intermediate object, that is, overwrite the object with iframe, and overwrite the iframe with div.

<Div class = "dropdown"> <p> dialog box </p> <iframe id = "iframe" src = "about: blank "frameborder =" 0 "marginheight =" 0 "marginwidth =" 0 "style =" position: absolute; visibility: inherit; top: 0px; left: 0px; width: 100%; height: 100%; z-index:-1; filter: alpha (opacity = 0); "> </iframe> </div> <div style =" width: 950px; height: 400px; position: relative; z-index: 9; "> <object id =" CmCaptureOcx "style =" width: 100%; height: 100%; "classid =" clsid: 3CA842C5-9B56-4329-A7CA-35CA77C7128D "> </object> </div>

Note:

1. The div must have a specific z-index that is greater than iframe and cannot be auto or empty;

2. the z-index of iframe must be negative (it is always set as a positive value before, although it is smaller than the z-index of div, it cannot be overwritten by div). Otherwise, div cannot cover iframe;

3. The top and left of iframe are 0, and the width and height of iframe are equal to the width and height of div;

4. Set the iframe transparency to 0.

5. If there are multiple pop-up boxes on the page, you can use js to dynamically add iframe.