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. 下载url地址的图片

    // string url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=cNaaMfvhpb1vmcVRXRAdI ...

  2. List 集合remove问题

    java的list集合中.使用remove删除元素: 方法一: static List<Integer> list3 = new ArrayList<Integer>(); s ...

  3. 深度学习图像标注工具VGG Image Annotator (VIA)使用教程

    VGG Image Annotator (VIA)是一款开源的图像标注工具,由Visual Geometry Group开发. 可以在线和离线使用,可标注矩形.圆.椭圆.多边形.点和线.标注完成后,可 ...

  4. Centos7 防火墙关闭和启用iptables防火墙

    操作系统环境:CentOS Linux release 7.0.1406(Core) 64位CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙步骤. 1.关闭f ...

  5. MongoDB创建索引（不锁库方法）

    db.collection.createIndex( { a: 1 }, { background: true } )https://docs.mongodb.org/manual/tutorial/ ...

  6. ASP.NET的一些小问题

    如何获取网站当前绝对路径? string path = HttpRuntime.AppDomainAppVirtualPath; 注:该路径结尾不含'/'.

  7. Hypothesis Testing

    Hypothesis Testing What's Hypothesis Testing(假设检验) Hypothesis testing is the statistical assessment ...

  8. angular学习笔记(十)-src和href处理

    本篇主要介绍angular中图片的src和链接的href的处理: 用到了以下两个属性: ng-src: 绑定了数据的路径表达式 ng-href: 绑定了数据的路径表达式 例如: <!DOCTYP ...

  9. pre 强制换行

    当前位置:懒人建站 > javascript > 网页特效 > css强制pre标签换行 css强制pre标签换行,pre标签的功能就是保留文本源格式,将会保留文本的长度,空格 空行 ...

  10. gradle本地文件仓库 (52.6.5. Flat directory repository)

    If you want to use a (flat) filesystem directory as a repository, simply type: Example 52.32. Flat r ...