Iframe 和父页面交互+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;                              }                          }                      }                  }              };  

//调用 [ javascript ]IframeOnClick.track(document.getElementById("iFrame"), function() {  alert('a click'); }); //这个方法不管有几层iframe，都能获取到

另外父页面获取iframe 页面内的元素：

//格式：$(window.frames["iframe的name值"].document.getElementById("iframe中控件的ID")).click();  //实例：$(window.frames["ifm"].document.getElementById("btnOk")).click(); //格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//实例：$("#ifm").contents().find("#btnOk").click();

子页面iframe获取父页面的元素：

$('#tt', parent.document).click(    function(){        alert(111);    });//这样只能获取当前iframe的父级，如果要获取父级的父级，要用两个parent//如下：$('#tt', parent.parent.document).click(    function(){        alert(111);    });

另外子页面调用父页面的方法可用：

window.parent.fn1();

父页面调用子页面的方法：

//childframe为iframe的id，child为iframe的name属性document.getElementById("childframe").onload=function(){    child.window.fn2();}