如果页面上有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可供我们使用,最终的解决方案如下:

  1. var IframeOnClick = {
  2. resolution: 200,
  3. iframes: [],
  4. interval: null,
  5. Iframe: function() {
  6. this.element = arguments[0];
  7. this.cb = arguments[1];
  8. this.hasTracked = false;
  9. },
  10. track: function(element, cb) {
  11. this.iframes.push(new this.Iframe(element, cb));
  12. if (!this.interval) {
  13. var _this = this;
  14. this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);
  15. }
  16. },
  17. checkClick: function() {
  18. if (document.activeElement) {
  19. var activeElement = document.activeElement;
  20. for (var i in this.iframes) {
  21. if (activeElement === this.iframes[i].element) { // user is in this Iframe
  22. if (this.iframes[i].hasTracked == false) {
  23. this.iframes[i].cb.apply(window, []);
  24. this.iframes[i].hasTracked = true;
  25. }
  26. } else {
  27. this.iframes[i].hasTracked = false;
  28. }
  29. }
  30. }
  31. }
  32. };

调用

    1. IframeOnClick.track(document.getElementById("iFrame"), function() { alert('a click'); });

为iframe添加onclick事件的更多相关文章

  1. JS如何为iframe添加onclick事件

    如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的, 例如: $("#iframe1").click(function() ...

  2. jq动态添加onclick事件在谷歌中不起作用

    $("#oa-bed-rooType").append($('<option/>').val(0).text('请选择房间类型')); $('#oa-bed-roomT ...

  3. a 标签添加 onclick 事件

    a 标签添加 onclick 事件 <a href="javascript:void(0);" οnclick="js_method()">点击&l ...

  4. HTML中在a标签中添加onclick事件

    1.链接的onclick 事件被先执行,其次是href属性下的动作; 2.假设链接中同时存在href 与onclick,如果想让href 属性下的动作不执行,onclick 必须得到一个false的返 ...

  5. 利用事件的冒泡特性,为子标签添加Onclick事件

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 为iframe添加鼠标事件

    1.关于iframe标签 使用iframe元素会创建包含另外一个文档的内联框架(即行内框架).所以我们可以使用iframe标签,在一个页面嵌入另一个页面.通过指定iframe的src为另一个页面的路径 ...

  7. js为元素添加onclick事件

    $("div.manu a:last").on('click',function(){ if (page == totalPage) { return; } page = page ...

  8. 动态加载下拉框列表并添加onclick事件

    1.  js动态加载元素并设置属性 摘自(http://www.liangshunet.com/ca/201408/336848696.htm) <div id="parent&quo ...

  9. 原生js遍历每一个对象,给每一个对象添加onclick事件

    <script type="text/javascript"> window.onload = function () { var imgs = document.im ...

随机推荐

  1. 《Java程序设计》 第四周学习总结

    学号 20175313 <Java程序设计>第四周学习总结 教材学习内容总结 第五章主要内容 了解子类的继承性 子类和父类在同一包中的继承性(除private外其余都继承) 子类和父类不在 ...

  2. Linux之SSH免密登录

    实验方法: 开启两台虚拟机A和B,IP地址分别为192.168.222.12.192.168.222.10 在虚拟机A下做如下操作,生成公钥和密钥: [root@localhost ~]# ssh-k ...

  3. OrbSLAM2采集点云数据

    因为条件限制,在Windows10平台下实现OrbSLAM2+Kinect2点云数据采集. 1. 遇到问题,启动运行没多久就跟丢了,有的地方哪怕轻微的旋转甚至不动都无法跟踪. 原因:相机的标定参数不对 ...

  4. 一个项目中mysql数据库经常死锁的问题解决记录

    1.问题描述 此项目为一个物流系统,需要使用PDA对货物进行入库.备货.出货等操作,在系统开发测试过程中,经常发现死锁问题. 有这样一种业务场景:仓库对备货单上货进行扫码备货后,点击"完成& ...

  5. 好的封装 vs 好的复用

    好的封装 vs 好的复用好的封装 一个封装相对较好的体现和实现方式如下:内部类的方式来组织代码,不需要外面的类指导我内部的类. 好的复用一个好的复用的体现和实现方式如下:可以通过搭积木的方式来组织功能 ...

  6. 服务注册发现Eureka

    一 Eureka相关概念 1 Peer   2 Zone   3 Region 地理区域   3 CAP理论   4 在线扩容   5     二 注册发现 Eureka 1 搭建Server服务端 ...

  7. linux和Windows下用sublime text3编译运行C,C++

    安装MinGW 1.首先安装MinGW,默认安装位置是C:\MinGW. 2.安装完成后,右键“我的电脑”->属性 ->高级->环境变量,在系统环境变量PATH里添加C:\MinGW ...

  8. 主线程——main线程

    定义一个普通的类: 引用这个类,执行main方法,main方法就是一个主线程: 线程:进程的执行单元,可以理解为栈内存中的所执行的方法(除了main方法之外都是线程中的run方法)地址开辟通往cpu的 ...

  9. flask 定义数据库关系(一对一)

    一对一 我们将使用国家和首都来演示一对一关系:每个国家只有一个首都.反过来,一个城市也只能作为一个国家的首都.一对一关系如下: 在示例程序中,Country类表示国家,Capital类表示首都.建立一 ...

  10. CentOS 6.5系统中安装配置MySQL数据库

    就像Windows server 2003,2008中一般安装的是Sql Server 数据库,在linux系统中一般安装的是mysql数据库,而且Mysql数据库的第一个版本就是发行在Linux系统 ...