爲iframe添加onclick事件

假設我們做一個下拉框的功能，當鼠標在頁面上的其它位置點擊一下時，這個下拉框就隱藏掉了，通常在沒有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>

轉載地址：http://my.oschina.net/jsan/blog/39684