为iframe添加鼠标事件

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

1   <html>
2   <head>
3    <title>Demo</title>
4     <metahttp-equiv="Content-Type"content="text/html; charset=gbk" />
5    <scripttype="text/javascript"src="script.js"></script>
6   </head>
7     <scripttype="text/javascript">
8    varcontainerdiv;9   functiondiv_mousemove(){10 containerdiv=document.getElementById("container");11 containerdiv.style.display= "none";12 alert("onmousemove");13 containerdiv.style.display= "block";14 }15    </script>
16   <body>
17        <divid="container"onmousemove="div_mousemove();"style="background:rgba(250,0,0,0);width:100%;height:100%;position:absolute;"></div>
18     <divid="ar"style="background-color: green;index-z:1" >
19            <iframeid="showwin"frameborder="0"style="background-color: red"scrolling="no"width="100%"height="100%" ></iframe>
20    </div>
21   </body>
22   </html>

　　page.html代码：

1 <html>
2  <head>
3   <title> New Document </title>
4   <metaname="Generator"content="EditPlus">
5   <metaname="Author"content="">
6   <metaname="Keywords"content="">
7   <metaname="Description"content="">
8  </head>
9  <body>
10 this is iframe area11  </body>
12 </html>

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

转载于:https://www.cnblogs.com/always-online/p/3476892.html

为iframe添加鼠标事件相关推荐

百度地图只显示某个省自定义标注点添加鼠标事件
小白初试,这里用广西省为例,但是感觉百度地图加载属实有点慢=.= 以下是完整代码 <!DOCTYPE html> <html lang="en"> < ...
Qt给控件添加鼠标事件
处理控件上的鼠标事件,是做界面人机交互经常需要的,本文做一个使用的总结.本文在QLable控件中实验过. 一.在h文件中声明鼠标响应事件处理函数 public:explicit MainWindow( ...
php怎么添加鼠标事件_jquery中如何给每一个li添加mouseover事件？
jquery可以通过选择器选择一类的标签集合.然后通过$(this)指向当前对象. $("#ul li")这个可以获取id为ul下的所有的li 当鼠标经过某个li是使用$(this ...
VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索，在iframe中获取选中文字，监听鼠标事件，右键菜单
一.VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索需求实现:vue实现预览pdf文件,获取到鼠标选中的文字数据.调用pdf.js自带的搜索方法实现搜索功能(后期可以调用该接口满足其他 ...
UE4学习-鼠标事件（按下、释放、物体抓取、计算重量、触发开门）
文章目录关键类鼠标按下.释放事件物体抓取计算物体重量关键类本篇博文用到的关键类有: UInputComponent 用来绑定鼠标的按下和释放事件 BindAction UPhysicsHa ...
基于OpenGL编写一个简易的2D渲染框架-07 鼠标事件和键盘事件
这次为程序添加鼠标事件和键盘事件当检测到鼠标事件和键盘事件的信息时,捕获其信息并将信息传送到需要信息的对象处理.为此,需要一个可以分派信息的对象,这个对象能够正确的把信息交到正确的对象. 实现思路: ...
用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动
第三篇,鼠标事件与游戏人物移动一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用. 这样的话,添加鼠标事件,其实只需要给ca ...
html游戏让目标人物移动,用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动...
第三篇,鼠标事件与游戏人物移动一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用. 这样的话,添加鼠标事件,其实只需要给ca ...
html游戏让目标人物移动,如何用html5编写鼠标事件与游戏人物移动
前面已经介绍了用仿ActionScript的语法来编写html5的第一篇.第二篇,下面是第三篇,如何用html5编写鼠标事件与游戏人物移动,事不宜迟,赶紧来学习下吧. 一.假设假设,所有可添加鼠标事 ...

为iframe添加鼠标事件

为iframe添加鼠标事件相关推荐

最新文章

热门文章