滑鼠點在iframe頁面内無法關閉父頁面的select下拉框

為什麼在子頁面點選無法關閉父頁面下拉框？

答：

1. 通常在沒有iframe時，當我們做一個下拉框的功能，當滑鼠在頁面上的其它位置點選一下時，這個下拉框就隐藏掉了，這個功能很容易做，給document綁定onmousedown或onclick即可。

2. 如果頁面上有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;
        }
      }
    }
  }
};      

再然後調用它就可以了：

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

其實主要通過焦點比對來進行監聽的,是以你在它的點選函數裡改變一下焦點 $body.focus(); 這樣在子頁面随便哪個地方點選都可以執行alert()函數

其他小知識：

在網頁中，如何擷取嵌入網頁中的iframe内的document 對象呢？

1、第一種通路方法

這種寫法估計很多人都沒有用過：

document.getElementById(‘iframe1’).Document

注意：這裡的擷取document對象使用的是大寫的Document， 若寫成小寫的document對象則指目前網頁的document對象。

測試方法：

document.getElementById(‘iframe1’).document.writeln(‘test is ok’); //結果：目前網頁頁面輸出test is ok

document.getElementById(‘iframe1’).Document.writeln(‘test is ok’); //結果：嵌入網頁（iframe1）頁面輸出test is ok

//iframe的document對象
document.getElementById('iframe1').Document      

//目前網頁的document對象
document.getElementById('iframe1').document      

2、第二種通路方法

document.getElementById(‘iframe1’).contentWindow.document

iframe裡面的元素觸發父視窗元素事件的jquery代碼

例如父視窗定義了一個事件。

top:

$(dom1).bind(‘topEvent’, function(){});

那麼iframe裡面的元素怎樣觸發父視窗dom1的事件呢？這樣嗎？

$(dom1, parent.document).trigger(‘topEvent’);

看似正确，實則誤導人。

因為父視窗的jquery對象與iframe裡面的jquery對象實際為兩個對象（function），iframe裡面的jquery并不會觸發另一個jquery對象定義的事件。除非你在iframe這樣定義了：

iframe:

self.$ = parent.$;

是以解決的方法很簡單：

parent.$(dom1,parent.doucment).trigger(‘topEvent’);