• 为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);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>

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

  • 相关阅读:
    Android通过包名启动应用程序
    android 通过反射方法获取状态栏高度
    Android在输入法界面监听按键(以返回键为例)
    Android主动弹出输入法
    Android使用内部类自定义控件
    Android中ListView列表Item的圆角效果实现
    Android中关于系统Dialog无法全屏的问题
    Dart学习记录(五)
    Dart学习记录(四)—— 库
    Dart学习记录(三)—— 泛型
  • 原文地址:https://www.cnblogs.com/always-online/p/3476892.html
Copyright © 2020-2023  润新知