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. Putty设置删除

    1. 开始→运行→cmd(进入字符界面) 2.切换目录到putty安装目录 3.执行以下清理命令 4.会跳出如下提示信息 点击[是(Y)]

  2. LevelDB场景分析1--整体结构分析

    基本用法 数据结构 class DBImpl : public DB { private:     struct CompactionState;     struct Writer;// Infor ...

  3. Linux调度器 - 进程优先级

    一.前言 本文主要描述的是进程优先级这个概念.从用户空间来看,进程优先级就是nice value和scheduling priority,对应到内核,有静态优先级.realtime优先级.归一化优先级 ...

  4. Singleton - 单例模式和Double-Checked Locking - 双重检查锁定模式

    问题描述 现在,不管开发一个多大的系统(至少我现在的部门是这样的),都会带一个日志功能:在实际开发过程中,会专门有一个日志模块,负责写日志,由于在系统的任何地方,我们都有可能要调用日志模块中的函数,进 ...

  5. spring3.0.6+hibernate3升级spring4.1.6+hibernate4.3遇到的问题

    1.下面这三个包,在hibernate4中已经废弃了,因为都直接用session来进行很好的事务管理 import org.springframework.orm.hibernate3.Hiberna ...

  6. ubuntu14中创建python虚拟环境

    一.安装python-virtualenv包 sudo apt-get install python-virtualenv 安装完成后,创建一个虚拟环境文件夹. mkdir VENVcd VENV 创 ...

  7. mysql-5.7 saving and restore buffer pool state 详解

    一.mysql 重启要面临的问题: 由于重启后之前innodb buffer pool中缓存的数据就都没有了,如果这个时候业务SQL来临,mysql就只能是从磁盘中 读取数据到内存:可能要经过数个小时 ...

  8. javascript页面刷新的一些方法

    在使用js刷新页面的时候,有时会遇到表单的重复提交问题 这时就需要一些强制刷新的办法,从网上大概搜了一下,js的刷新方法大致有以下几种, 刷新页面,不提示重新发送: window.location.r ...

  9. 启动vim不加载.vimrc

    启动vim,不加载.vimrcvim -u NONE -N

  10. animation几个比較好玩的属性(alternate,及animation-fill-mode)

    <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; backg ...