关闭

为iframe添加onclick事件

1071人阅读 评论(2) 收藏 举报
分类:

假设我们做一个下拉框的功能,当鼠标在页面上的其它位置点击一下时,这个下拉框就隐藏掉了,通常在没有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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6762次
    • 积分:230
    • 等级:
    • 排名:千里之外
    • 原创:16篇
    • 转载:1篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论