为iframe添加鼠标事件

1、关于iframe标签

  使用iframe元素会创建包含另外一个文档的内联框架(即行内框架)。所以我们可以使用iframe标签,在一个页面嵌入另一个页面。通过指定iframe的src为另一个页面的路径,从而达到这个需求。然而iframe却不支持有些事件,比如鼠标的mousemove事件。对于这个需求,我们只有通过另外一种方式达到。

2、解决方法

  现在有两个页面一个是index.html页面,另一个是page.html。我们需要在index.html页面中通过iframe引入page.html。并且需要为iframe的区域 添加鼠标的mousemove事件。

  思路如下:

   a、先将iframe放在一个div(div1)里面,将这个div的index-z值设置成1.

   b、在页面中再添加一个div(div2),将这个div覆盖整个页面,并且为透明,index-z值设置比1大。

  这样我们只需监听第二个div的鼠标事件即可,在鼠标事件触发的函数里面做处理。

  当鼠标事件触发后,把div2的display设置成block,当函数处理完成之后,又将div2的display设置成none。这样基本满足需求。

3、相关代码

  index.html代码: 

 1   <html>
 2   <head>
 3    <title>Demo</title>  
 4     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
 5    <script type="text/javascript" src="script.js"></script> 
 6   </head>
 7     <script type="text/javascript">
 8    var containerdiv;
 9   function div_mousemove(){
10       containerdiv = document.getElementById("container");
11       containerdiv.style.display = "none";
12       alert("onmousemove");
13       containerdiv.style.display = "block";
14   }
15    </script>
16   <body >   
17        <div id="container" onmousemove="div_mousemove();"  style="background:rgba(250,0,0,0);width:100%;height:100%;position:absolute;"></div>
18     <div id="ar"   style="background-color: green;index-z:1" >  
19            <iframe id="showwin"  frameborder="0"  style="background-color: red"  scrolling="no" width="100%" height="100%" ></iframe> 
20    </div>  
21   </body>
22   </html>   

  page.html代码:

 1 <html>
 2  <head>
 3   <title> New Document </title>
 4   <meta name="Generator" content="EditPlus">
 5   <meta name="Author" content="">
 6   <meta name="Keywords" content="">
 7   <meta name="Description" content="">
 8  </head>
 9  <body>
10     this is iframe area
11  </body>
12 </html>

  同理鼠标的其他事件可以用这种方式来实现。

上一篇:HTML标记语法之表格元素


下一篇:Maven版本号中隐藏的惊天大秘密