为iframe添加onclick事件

转载 2016年08月29日 15:32:07

假设我们做一个下拉框的功能,当鼠标在页面上的其它位置点击一下时,这个下拉框就隐藏掉了,通常在没有iframe时,这个功能很容易做,给document绑定onmousedown或onclick即可,利于事件的冒泡机制即可轻松完成需求,当然记得给下拉框取消事件冒泡

如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的,所以需要给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;
    }
   }
  }
 }
};

使用:

 <iframe src="http://www.baidu.com" id="iframe" style=""></iframe>
<script type="text/javascript">
IframeOnClick.track(document.getElementById("iframe"), function() { alert('a click'); });
</script>

相关文章推荐

使用js动态添加点击事件时,click与onclick的区别

使用js动态添加点击事件时,click与onclick的区别!!!!!

html中<select>标签添加onclick()事件的正确写法

首先,看我的写法: 选择查找方式 简单查询 模糊检索 高级搜索 ...

uGUI使用代码动态添加Button.OnClick()事件(Unity3D开发之十二)

猴子原创,欢迎转载。转载请注明: 转载自Cocos2Der-CSDN,谢谢!原文地址: http://blog.csdn.net/cocos2der/article/details/42705885 ...

SpannableString 来改变textView中http协议,手机号,已经你想要改变的字的颜色,以及添加onClick事件

SpannableString 来改变textView中http协议,手机号,已经你想要改变的字的颜色,以及添加onClick事件...

js循环添加onclick事件

javascript在循环添加onclick事件时会出现函数传入参数均为最后一个值的问题,编写一个test.html如下所示: for (var i=0;i...

uGUI使用代码动态添加Button.OnClick()事件

uGUI使用代码动态添加Button.OnClick()事件 原文地址: http://blog.csdn.net/cocos2der/article/details/42705885 uGUI出...

input按钮onclick事件大全

  • 2010年05月11日 09:52
  • 4KB
  • 下载

ListBox 加的OnClick事件

  • 2008年11月28日 22:04
  • 19KB
  • 下载

用Tag区分Click事件(为动态生成的页面添加onClick事件)

Android开发中,经常用到Button控件,关于Button的Click事件的响应,有很多种方法,简单地说,可以归为两种,一种是在xml文件的Button标签中,添加android:onClick...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:为iframe添加onclick事件
举报原因:
原因补充:

(最多只允许输入30个字)