zoukankan      html  css  js  c++  java
  • IE下object元素遮挡div表单

    目前遇到这样的一个问题:

    我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无法相应,一搜索,确实是这样。那么怎么办呢?万能的搜索啊,终于有两种解决方案:

    1,js监听ActiveX控件的行为。(按照网上给的,行不通,监听失败,原因是很多都是10年左右用vc++写的ocx插件的方法,现在行不通)

    2,直接通过js控制。

    很明显采用第2个方法,于是新的问题就出现了:

    怎么调用?

    于是有搜索,一种解决方案:div覆盖。

    于是就出现了标题中的问题:IE下object元素遮挡div表单

    解决方案为:用iframe:

    原理:Iframe框架可以遮盖OBJECT、SELECT,DIV可以遮盖Iframe。因此,我们可以将Iframe放置在DIV层内,将Iframe大小宽度设置成与层一样放置在层之下,当层经过OBJECT、SELECT时,下方的框架将替层遮盖其不能遮盖的控件。
    需要说明的是使用HTML标签属性设置显示层次,必须是z-Index而不是zIndex。zIndex是使用脚本动态修改属性使用。两者不通用。

    原因:

    大多表单控件或HTML控件是使用浏览器本身渲染绘制,因此层次可以由浏览器自身控制。而SELECT控件是Windows窗口控件,同样可见型ActiveX容器也是使用面向Windows技术开发。它们表现实质仍是相同,都是Windows窗口包含句柄。因此,浏览器不能对其调整层次,浏览器本身与他们都是平级的

    最后解决方案:

      <td class="videoBox">
                            <div class="videoDiv" style="background-color:#f00;"  onclick="clickme()">
                                <iframe  src="about:blank" frameBorder=0 marginHeight=0 marginWidth=0
                                        style="position:relative; visibility:inherit; top:0px;left:0px;height:100%;100%; z-Index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';">
                                </iframe>
                            </div>
                            <object id="player00" name="player00" classid="clsid:0aafd513-e1ed-4ce9-8539-9434f9106030" selected="true" displaying="true" style=" 100%;height: 590px;margin: auto" >
                            </object>
                        </td>
    object覆盖div

    对应的CSS

            .videoBox{
                position:relative; /*给表格的td设置绝对定位属性*/
            }
            .videoDiv{
                width:100%;
                height:100%;
                position:absolute;
                left:5px;
                top:0;
                z-index:11;/*给覆盖在视频上面的div设置相对属性,其中z-index一定要比视频的z-index数值高*/
            }
            object{
                position:relative;
                left:0;
                top:0;
                z-index:10;
            }
    对应的css

    原文来自于

    原文

  • 相关阅读:
    TreeView的自定义绘制图标处理
    业务逻辑层的封装设计
    记一次CS系统与BS的对接集成
    cmd命令使用备忘
    如何有效管理员工
    代码可维护性重要吗?
    Oracle GoldenGate Director安装备忘
    浅析C#深拷贝与浅拷贝
    一首同音叠字诗“石室诗士施氏”
    Ajax原生使用
  • 原文地址:https://www.cnblogs.com/ningheshutong/p/6708490.html
Copyright © 2011-2022 走看看