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. SQL Server里面导出SQL脚本(表数据的insert语句)

    转载自:http://hi.baidu.com/pigarmy/blog/item/109894c445eab0a28326ac5a.html 最近需要导出一个表的数据并生成insert语句,发现SQ ...

  2. jquery中 $ 和 jQuery 及 $() 的区别

    用过jquery的人都知道,jquery有两种用法,一种是$,还有一种是jQuery,那么这两种方式在使用上有什么区别呢? 答案是这两种用法没什么区别,只是别名而已,用$要比jQuery简短一些.方便 ...

  3. JMeter UI 启动时报错

    Problem After running jmeter.bat command under Windows 7 with cmd  the following error is produced:W ...

  4. 透析Java本质-谁创建了对象,this是什么

    是构造方法创建的对象吗 package com.java.essence_36; import java.util.ArrayList; import java.util.List; /** * Cr ...

  5. WinForm窗体键盘事件，支持方向键和回车键

    /// <summary> /// 快捷键操作 /// </summary> protected override bool ProcessCmdKey(ref Message ...

  6. react dva 的 connect 与 @connect

    https://dvajs.com/guide/introduce-class.html#connect-方法 connect的作用是将组件和models结合在一起.将models中的state绑定到 ...

  7. leetcode-000-序

    一直以来学习的都是些理论,编程一直用的也是MATLAB,其他语言很少涉及.希望自己弥补这一块短板,时间初步定在五月底,拿出半个月时间学习Python,学多少算多少. 直接从leetcode开始: ar ...

  8. vim+cscope简易教程

    Cscope具有纯正的Unix血统,它最早是由贝尔实验室为PDP-11计算机开发的,后来成为商用的AT&T Unix发行版的组成部分.直到2000年4月,这个工具才由SCO公司以BSD lic ...

  9. openvpn证书吊销

    声明变量source ./vars使用revoke-full命令吊销客户端证书./revoke-full client-name(common name)命令执行后,我们能在keys目录中找到一个文件 ...

  10. nginx反向代理配置实例分享

    nginx反向代理配置一例. 配置内容如下: user www www; worker_processes 8; error_log /usr/local/webserver/nginx/logs/n ...