activex插件遮盖问题的处理_多页签内嵌了cab组件后其他页面遮挡-优快云博客

本文链接：https://blog.youkuaiyun.com/hhhh2012/article/details/27176483

本文介绍了一种解决网页中播放插件遮挡移动DIV的技术方案。通过使用可移动的iframe来覆盖插件区域，并将需显示的内容置于iframe之上，以此实现DIV在页面上的自由移动而不被遮挡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个播放音频的项目；由于界面上有播放音频的插件，插件占了页面的很大一块区域；而我们有需要有一个移动的DIV显示其他的信息；但当我加上可移动div后，当div移动到插件区域，插件就会将div遮挡住；我试了z-index等属性；还是没用；网上查找资料，也没有一个很好的解决方案；一方面我们叫负责插件这块的同事继续找找相关的资料，看下能否在插件本身上下功夫把这个问题解决掉；另一方面我们也在网页上找方法。

经过试验，我发现了这样的几点：

1、外部的iframe能够遮挡插件； 2、内部div可以遮住iframe；基于这两个条件；我们可以用移动的iframe遮住插件；然后再将要显示的div放在iframe上；这就是此问题的解决方案；

具体代码如下；由于是自己测试所用，代码有些乱；而且插件也没有提供：

<html>
<head>
<style type="text/css">

</style>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(function(){
	var _move=false;//移动标记
	var _x,_y;//鼠标离控件左上角的相对位置
    //$("#movBar").click(function(){
	$(window.frames["divIframe"].document).find("#testId").click(function(){
        //alert("click");//点击（松开后触发）
        }).mousedown(function(e){
        _move=true;
        _x=e.pageX-parseInt($("#movFrame").css("left"));
        _y=e.pageY-parseInt($("#movFrame").css("top"));
        $("#movFrame").fadeTo(20, 0.5);//点击后开始拖动并透明显示
    });
    $(window.frames["divIframe"].document).mousemove(function(e){
        if(_move){
            var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
            var y=e.pageY-_y;
            $("#movFrame").css({top:y,left:x});//控件新位置
        }
    });$(window.frames["divIframe"].document).mouseup(function(){
    _move=false;
    $("#movFrame").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
  });
  
  
  var _move2 = false;
 var _x2,_y2;
  $("#movBar").click(function(){
	 //$(window.frames["divIframe"].document).find("#testId").click(function(){
        //alert("click");//点击（松开后触发）
        }).mousedown(function(e){
        _move2=true;
        _x2=e.pageX-parseInt($("#movFrame").css("left"));
        _y2=e.pageY-parseInt($("#movFrame").css("top"));
        $("#movFrame").fadeTo(20, 0.5);//点击后开始拖动并透明显示
    });
    $(document).mousemove(function(e){
        if(_move2){
            var x=e.pageX-_x2;//移动时根据鼠标位置计算控件左上角的绝对位置
            var y=e.pageY-_y2;
            $("#movFrame").css({top:y,left:x});//控件新位置
        }
    }).mouseup(function(){
    _move2=false;
    $("#movFrame").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
  });
  
  
  
  
  var _x1,_y1;
  var _move1 = false;
    $("#movBar1").click(function(){
	 //$(window.frames["divIframe"].document).find("#testId").click(function(){
        //alert("click");//点击（松开后触发）
        }).mousedown(function(e){
        _move1=true;
        _x1=e.pageX-parseInt($("#movFrame1").css("left"));
        _y1=e.pageY-parseInt($("#movFrame1").css("top"));
        $("#movFrame1").fadeTo(20, 0.5);//点击后开始拖动并透明显示
    });
    $(document).mousemove(function(e){
        if(_move1){
            var x=e.pageX-_x1;//移动时根据鼠标位置计算控件左上角的绝对位置
            var y=e.pageY-_y1;
			
			 $("#movFrame3").css({top:y,left:x});//移动遮罩层iframe
			
            $("#movFrame1").css({top:y,left:x});//控件新位置
        }
    }).mouseup(function(){
    _move1=false;
    $("#movFrame1").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
  });
  
  
});


   /*--------------拖曳效果----------------
	            *原理：标记拖曳状态dragging ,坐标位置iX, iY
	            *         mousedown:fn(){dragging = true, 记录起始坐标位置，设置鼠标捕获}
	            *         mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置，绝对定位的元素获得差值}
	            *         mouseup:fn(){dragging = false, 释放鼠标捕获，防止冒泡}
            */
/**
 $(function(){
	         
	            var dragging = false;
	            var iX, iY;
	            $("#movFrame").mousedown(function(e) {
	                dragging = true;
	                iX = e.clientX - this.offsetLeft;
	                iY = e.clientY - this.offsetTop;
	                this.setCapture && this.setCapture();
	                return false;
	            });
	            document.onmousemove = function(e) {
	                if (dragging) {
	                var e = e || window.event;
	                var oX = e.clientX - iX;
	                var oY = e.clientY - iY;
	                $("#movFrame").css({"left":oX + "px", "top":oY + "px"});
	                return false;
	                }
	            };
	            $(document).mouseup(function(e) {
	                dragging = false;
	                $("#movFrame")[0].releaseCapture();
	                e.cancelBubble = true;
	            })
	 
	        })


*/
</script>
</head>
<body>
    <div style="text-align: center;">
        <script language="JavaScript" type="text/javascript">
            document.write("<object id='ERSPlayer' style'top:100px;left:160px; width:747px; height:280px;' classid='clsid:1282AAB8-8AB0-473A-8E67-C95A4D5796C8'>");
            document.write("<param name='ftpServerIP' value='10.8.59.194' />");
            document.write("<param name='strCulture' value='en-us' />");
            document.write("<param name='curPageTitle' value='ERSplayer' /></object>");
        </script>
    </div>
<div id="movFrame"style="top:10px;left:60px;background:gray;position:absolute;width:600px;height:360px;">
	<div id="movBar" style="width:600px;height:60px;background:green;cursor:move;">
	</div>
	<div id="content" style="width:600px;height:300px;background:blue;">
		<iframe id='divIframe' style="left: 0px; top: 0px;width:600px;height:280px;" src="divMoveIframe.html" >
			
		</iframe>
	</div>

</div>

<div id="movFrame1"style="top:100px;left:160px;background:gray;z-index:2;position:absolute;width:600px;height:360px;">
	<div id="movBar1" style="width:600px;height:60px;background:green;cursor:move;">
	</div>
	<div id="content1" style="width:600px;height:300px;background:blue;">

	</div>

</div>

<div id="movFrame3"style="top:100px;left:260px;background:yellow;position:absolute;z-index:1;width:600px;height:361px;">

		<iframe id='divIframe' style="left: 0px; top: 0px;width:600px;height:360px;" src="divMoveIframe1.html" >
			
		</iframe>
</div>
</body>
</html>