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代码：　

   <html>

   <head>

    <title>Demo</title>

     <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

    <script type="text/javascript" src="script.js"></script>

   </head>

     <script type="text/javascript">

    var containerdiv;

   function div_mousemove(){

       containerdiv = document.getElementById("container");

       containerdiv.style.display = "none";

       alert("onmousemove");

       containerdiv.style.display = "block";

   }

    </script>

   <body >

        <div id="container" onmousemove="div_mousemove();"  style="background:rgba(250,0,0,0);width:100%;height:100%;position:absolute;"></div>

     <div id="ar"   style="background-color: green;index-z:1" >

            <iframe id="showwin"  frameborder="0"  style="background-color: red"  scrolling="no" width="100%" height="100%" ></iframe>

    </div>

   </body>

   </html>

　　page.html代码：

 <html>

  <head>

   <title> New Document </title>

   <meta name="Generator" content="EditPlus">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

  </head>

  <body>

     this is iframe area

  </body>

 </html>

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

为iframe添加鼠标事件的更多相关文章

  1. JS如何为iframe添加onclick事件

    如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的, 例如: $("#iframe1").click(function() ...

  2. 为iframe添加onclick事件

    如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的, 例如: $("#iframe1").click(function() ...

  3. 原生js添加鼠标事件的兼容性写法

    兼容pc和移动端,还兼容了surface平板. surface平板特别坑,既可以用鼠标也能用触摸屏,也就是说同时有touch事件和mouse事件. function addEvent(_target, ...

  4. winform/窗体鼠标事件编程中的几个问题

    1.进行.net窗体的开发,经常用到鼠标事件,如MouseDown/MouseUp/MouseMove/MouseClick等.可是有时候给控件添加鼠标事件,就是不响应,怎么办呢! 答案:1.控件是否 ...

  5. 以JTextPanel为例Swing的鼠标事件详解

    如下界面可以通过该界面研究一下Swing的鼠标事件: 图中用红粗线圈起来的为JtextPanel,该Panel添加了鼠标事件监听器,鼠标事件监听器有三种,分别为MouseWheelListener,M ...

  6. 基于OpenGL编写一个简易的2D渲染框架-07 鼠标事件和键盘事件

    这次为程序添加鼠标事件和键盘事件 当检测到鼠标事件和键盘事件的信息时,捕获其信息并将信息传送到需要信息的对象处理.为此,需要一个可以分派信息的对象,这个对象能够正确的把信息交到正确的对象. 实现思路: ...

  7. HTML5 精灵8方向移动+背景滚动+音效播放+鼠标事件响应

    如何清空画布 通过调用函数 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);   如何实现背景滚动 首先我们准备了一张2532*940 ...

  8. 用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动

    第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...

  9. MFC 鼠标事件

    1. 新建项目 项目名称:MFCBaseMessage 2. 选择基本对话框模式,如图 ,点击完成3. 最终如图 4.右键添加类向导   5.添加鼠标事件 6.在ON_LButtonDown添加如下代 ...

随机推荐

  1. java容器详细解析（转）

    :在java开发中我们肯定会大量的使用集合,在这里我将总结常见的集合类,每个集合类的优点和缺点,以便我们能更好的使用集合.下面我用一幅图来表示 其中淡绿色的表示接口,红色的表示我们经常使用的类. 1: ...

  2. Android 中日期对话框的应用

    import java.util.Calendar; import android.widget.DatePicker; import android.app.DatePickerDialog; // ...

  3. nginx https ssl 设置受信任证书[转然哥]

    nginx https ssl 设置受信任证书[原创] 1. 安装nginx 支持ssl模块 http://nginx.org/en/docs/configure.html yum -y instal ...

  4. 读书笔记6pandas简单使用

    一.序列Series,很像numpy中的array数组,可以由列表.元组.字典.numpy中的array来初始化 >>> from pandas import Series > ...

  5. mysql-5.7 收缩系统表空间详解

    innodb 系统表空间是一个逻辑上的概念,它的物理表现就是innodb系统表空间文件:在讲扩展系统表空间时我们说到 可以用增加文件,增加autoextend标记 这两种方式来解决:但是问题到了收缩表 ...

  6. django中跨app引用model

    可能是自己水平的原因,总感觉跨django中app引用有点怪怪的,所以在自己没有达到另一个级别之前就先把正确的解决 方案记一下吧. 一.django中跨app引用model,以app02中的model ...

  7. cocos2dx 3.3 场景切出时RenderTexture crash

    在cocos2dx 3.3中下面myScene在切出时会存在概率性崩溃(代码作了最大程度简化,仅为说明问题): class CmyLayer:public Layer{ public: CmyLaye ...

  8. 有关UITableviewCell 重用内存 内部解析

    重用实现分析 查看UITableView头文件,会找到NSMutableArray*  visiableCells,和NSMutableDictnery* reusableTableCells两个结构 ...

  9. 显示vim当前颜色主题

    在vim内,查看colors_name :echo g:colors_name 如果值为空,那么默认为:default主题

  10. cocos2d-x开发记录：二，基本概念（动作，动画，坐标系统）

    既然我们选择用cocos2d,那么他里面的一些基本概念我们肯定是要熟悉下的,以下资料来源于官网,英语好的可以直接去官网看. 一.Actions(动作) 动作都由于CCNode对象发出.这些动作通常修改 ...