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. SSAS 笔记

    SQL SERVER 2000创建多维数据集对应的cub文件   http://blog.csdn.net/zklth/article/details/6367816     http://msdn. ...

  2. Linux中断 - tasklet

    一.前言 对于中断处理而言,linux将其分成了两个部分,一个叫做中断handler(top half),属于不那么紧急需要处理的事情被推迟执行,我们称之deferable task,或者叫做bott ...

  3. eclipse逆向生成实体类注解方式或者xml方式

    转载自:http://www.2cto.com/database/201501/372023.html http://blog.csdn.net/wangpeng047/article/details ...

  4. [转]Win7独立语言包下载

    想找个语言包太不容易了 ,全是旧版的,最后不得以...在国外网站找到了下载地址,全部是最新的语言包!自己找对应语言的缩写吧 64-bit (x64) Windows 7 SP1: http://dow ...

  5. Es6 函数式编程 MayBe函子的简单示例

    初级函子的作用非常简单,使用场景主要体现在:深入访问object的属性的时候,不会担心由于属性不存在.undefined.null等问题出现异常. MayBe.js var MayBe = funct ...

  6. Wavenet运行

    作者:桂. 时间:2017-05-10  19:17:32 链接:http://www.cnblogs.com/xingshansi/p/6832219.html 一.环境 python3.5 Win ...

  7. UNIX环境高级编程（第三版）关于apue.h的用法

    UNIX环境高级编程(第三版)中的例子用到apue.h这个头文件,但是书里面写的地址已经不能访问. 经过一番查找之后,找到如下解决方案: 1.到www.apuebook.com上下载第2版的源码,也可 ...

  8. HDU 4565 So Easy!(公式化简+矩阵)

    转载:http://www.klogk.com/posts/hdu4565/ 这里写的非常好,看看就知道了啊. 题意很easy.a,b,n都是正整数.求 Sn=⌈(a+b√)n⌉%m,(a−1)2&l ...

  9. SourceInsight-查看java中接口对应的实现类

    1.双击选中需要查看的接口名称,然后右击选择“Show in Relation Window” 2.然后在右侧会弹出一个Relation的窗口 如果没有列出对应的实现类,可以在接口名上再次右击,依次选 ...

  10. python学习之itsdangerous模块

    类 from itsdangerous import URLSafeTimedSerializer as ustsr class ustsr(secret_key) 参数: secret_key可以是 ...