鼠标点在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’);