为iframe添加onclick事件
如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的,
例如:
$("#iframe1").click(function(){//点击iframe
alert("点击1");
});
或者
$(function(){//给iframe循环绑定click事件
for(var n=1;n<=7;n++){
$("#iframe"+n).bind("click",{n:n}, clickHandler);
}
function clickHandler(event) {
var n = event.data.n;
alert("点击"+n);
}
});
均行不通。
所以需要给iframe绑定类似的事件,当iframe指向的是第三方的内容时,还要考虑跨域的问题,因此通过操作iframe的document是行不通的,还好有document.activeElement可供我们使用,最终的解决方案如下:
- var IframeOnClick = {
- resolution: 200,
- iframes: [],
- interval: null,
- Iframe: function() {
- this.element = arguments[0];
- this.cb = arguments[1];
- this.hasTracked = false;
- },
- track: function(element, cb) {
- this.iframes.push(new this.Iframe(element, cb));
- if (!this.interval) {
- var _this = this;
- this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);
- }
- },
- checkClick: function() {
- if (document.activeElement) {
- var activeElement = document.activeElement;
- for (var i in this.iframes) {
- if (activeElement === this.iframes[i].element) { // user is in this Iframe
- if (this.iframes[i].hasTracked == false) {
- this.iframes[i].cb.apply(window, []);
- this.iframes[i].hasTracked = true;
- }
- } else {
- this.iframes[i].hasTracked = false;
- }
- }
- }
- }
- };
调用
- IframeOnClick.track(document.getElementById("iFrame"), function() { alert('a click'); });
为iframe添加onclick事件的更多相关文章
- JS如何为iframe添加onclick事件
如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的, 例如: $("#iframe1").click(function() ...
- jq动态添加onclick事件在谷歌中不起作用
$("#oa-bed-rooType").append($('<option/>').val(0).text('请选择房间类型')); $('#oa-bed-roomT ...
- a 标签添加 onclick 事件
a 标签添加 onclick 事件 <a href="javascript:void(0);" οnclick="js_method()">点击&l ...
- HTML中在a标签中添加onclick事件
1.链接的onclick 事件被先执行,其次是href属性下的动作; 2.假设链接中同时存在href 与onclick,如果想让href 属性下的动作不执行,onclick 必须得到一个false的返 ...
- 利用事件的冒泡特性,为子标签添加Onclick事件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 为iframe添加鼠标事件
1.关于iframe标签 使用iframe元素会创建包含另外一个文档的内联框架(即行内框架).所以我们可以使用iframe标签,在一个页面嵌入另一个页面.通过指定iframe的src为另一个页面的路径 ...
- js为元素添加onclick事件
$("div.manu a:last").on('click',function(){ if (page == totalPage) { return; } page = page ...
- 动态加载下拉框列表并添加onclick事件
1. js动态加载元素并设置属性 摘自(http://www.liangshunet.com/ca/201408/336848696.htm) <div id="parent&quo ...
- 原生js遍历每一个对象,给每一个对象添加onclick事件
<script type="text/javascript"> window.onload = function () { var imgs = document.im ...
随机推荐
- 《Java程序设计》 第四周学习总结
学号 20175313 <Java程序设计>第四周学习总结 教材学习内容总结 第五章主要内容 了解子类的继承性 子类和父类在同一包中的继承性(除private外其余都继承) 子类和父类不在 ...
- Linux之SSH免密登录
实验方法: 开启两台虚拟机A和B,IP地址分别为192.168.222.12.192.168.222.10 在虚拟机A下做如下操作,生成公钥和密钥: [root@localhost ~]# ssh-k ...
- OrbSLAM2采集点云数据
因为条件限制,在Windows10平台下实现OrbSLAM2+Kinect2点云数据采集. 1. 遇到问题,启动运行没多久就跟丢了,有的地方哪怕轻微的旋转甚至不动都无法跟踪. 原因:相机的标定参数不对 ...
- 一个项目中mysql数据库经常死锁的问题解决记录
1.问题描述 此项目为一个物流系统,需要使用PDA对货物进行入库.备货.出货等操作,在系统开发测试过程中,经常发现死锁问题. 有这样一种业务场景:仓库对备货单上货进行扫码备货后,点击"完成& ...
- 好的封装 vs 好的复用
好的封装 vs 好的复用好的封装 一个封装相对较好的体现和实现方式如下:内部类的方式来组织代码,不需要外面的类指导我内部的类. 好的复用一个好的复用的体现和实现方式如下:可以通过搭积木的方式来组织功能 ...
- 服务注册发现Eureka
一 Eureka相关概念 1 Peer 2 Zone 3 Region 地理区域 3 CAP理论 4 在线扩容 5 二 注册发现 Eureka 1 搭建Server服务端 ...
- linux和Windows下用sublime text3编译运行C,C++
安装MinGW 1.首先安装MinGW,默认安装位置是C:\MinGW. 2.安装完成后,右键“我的电脑”->属性 ->高级->环境变量,在系统环境变量PATH里添加C:\MinGW ...
- 主线程——main线程
定义一个普通的类: 引用这个类,执行main方法,main方法就是一个主线程: 线程:进程的执行单元,可以理解为栈内存中的所执行的方法(除了main方法之外都是线程中的run方法)地址开辟通往cpu的 ...
- flask 定义数据库关系(一对一)
一对一 我们将使用国家和首都来演示一对一关系:每个国家只有一个首都.反过来,一个城市也只能作为一个国家的首都.一对一关系如下: 在示例程序中,Country类表示国家,Capital类表示首都.建立一 ...
- CentOS 6.5系统中安装配置MySQL数据库
就像Windows server 2003,2008中一般安装的是Sql Server 数据库,在linux系统中一般安装的是mysql数据库,而且Mysql数据库的第一个版本就是发行在Linux系统 ...