为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>

iframe监听鼠标点击事件

iframe监听鼠标点击事件需要实现的页面逻辑是: 1. 点击父窗体中按钮,显示侧边栏; 2. 点击页面其他区域(iframe)可以隐藏侧边栏先构造页面文档结构: ...
  • sxqlmc000
  • sxqlmc000
  • 2017年04月25日 16:03
  • 2921

为iframe中的body添加click事件

为iframe中的body添加click事件 为iframe中的body添加click事件 ...
  • u013025627
  • u013025627
  • 2016年01月06日 12:37
  • 1230

jquery给页面上的iframe添加click或者是focus事件

这个功能研究了许久也不行。 下面是代码:没时间继续研究了。用了一个其他的方法区取代。谁看到,可以继续研究。 第一个new.html页面中有一个iframe去加载eval.html。 new.ht...
  • imzoer
  • imzoer
  • 2012年11月22日 21:42
  • 8407

给iframe添加点击事件

为iframe添加onclick事件 如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的, 例如:  $("#ifram...
  • sdta25196
  • sdta25196
  • 2017年12月01日 10:25
  • 211

为iframe添加onclick事件

假设我们做一个下拉框的功能,当鼠标在页面上的其它位置点击一下时,这个下拉框就隐藏掉了,通常在没有iframe时,这个功能很容易做,给document绑定onmousedown或onclick即可,如果...
  • sjzs5590
  • sjzs5590
  • 2013年11月17日 22:00
  • 9087

iframe监听鼠标点击事件

需要实现的页面逻辑是: 1. 点击父窗体中按钮,显示侧边栏; 2. 点击页面其他区域(iframe)可以隐藏侧边栏先构造页面文档结构: ...
  • m0_38069630
  • m0_38069630
  • 2017年08月16日 15:18
  • 599

调用iframe中的按钮点击

index.html function callChild(){ //myFrame.window.say(); myFra
  • vipzjh
  • vipzjh
  • 2016年10月19日 08:46
  • 3207

给页面内嵌iframe绑定监听事件

核心: var testiframe=document.getElementById("iframetest").contentWindow; 代码: ...
  • Vivianluolita
  • Vivianluolita
  • 2016年12月16日 10:22
  • 6950

iframe载入完成时的事件监听

经常会遇到这样一种情况。  在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快,或许我们感觉不到页面载入的不同步,但试想,如果一个需要内嵌到iframe里的页面的响应很慢,这里会...
  • wocaonima123987
  • wocaonima123987
  • 2012年12月18日 17:24
  • 32987

Iframe 和父页面交互+Iframe 的onclick()事件

假设我们做一个下拉框的功能,当鼠标在页面上的其它位置点击一下时,这个下拉框就隐藏掉了,通常在没有iframe时,这个功能很容易做,给document绑定onmousedown或onclick即可,如果...
  • KevinwuwenboA
  • KevinwuwenboA
  • 2016年12月22日 17:40
  • 4789
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:为iframe添加onclick事件
举报原因:
原因补充:

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