博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
为iframe添加onclick事件
阅读量:5917 次
发布时间:2019-06-19

本文共 1303 字,大约阅读时间需要 4 分钟。

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

 

[javascript]
  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. };  

调用

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

转载地址:http://wxgpx.baihongyu.com/

你可能感兴趣的文章
Python之retrying
查看>>
OWASP 10 大 Web 安全问题在 JEE 体系完全失控
查看>>
洛谷 P1640 BZOJ 1854 [SCOI2010]连续攻击游戏
查看>>
如何理解Unity组件化开发模式
查看>>
util.promisify 的那些事儿
查看>>
未来黑科技公司完成亿元Pre-B轮融资,已和宝马达成合作
查看>>
三篇文章了解 TiDB 技术内幕 - 谈调度
查看>>
【DG】DG的3种保护模式
查看>>
[20150107]关于print_table.txt
查看>>
Chrome 如何知道网站启用了SPDY 协议?
查看>>
8天玩转并行开发——第五天 同步机制(下)
查看>>
一次性关闭所有的Activity
查看>>
运算符 - PHP手册笔记
查看>>
二维数组的认识及其表示元素的两种方式
查看>>
LINUX下DNS的查看和配置
查看>>
分布式事务系列(1.2)Spring的事务体系
查看>>
docker search, pull, login, push with Docker Hub - public registry
查看>>
正则表达式学习
查看>>
FL2440字符设备驱动之LED
查看>>
使用Webpack + Gulp便捷开发运行于Dcloud平台HTML5 Plus Runtime引擎的HybridAPP项目的一些经验分享...
查看>>