鼠标点在iframe页面内无法关闭父页面的select下拉框

为什么在子页面点击无法关闭父页面下拉框&＃xff1f;

答&＃xff1a;
1. 通常在没有iframe时&＃xff0c;当我们做一个下拉框的功能&＃xff0c;当鼠标在页面上的其它位置点击一下时&＃xff0c;这个下拉框就隐藏掉了&＃xff0c;这个功能很容易做&＃xff0c;给document绑定onmousedown或onclick即可。
2. 如果页面上有iframe时&＃xff0c;鼠标点击在iframe内时&＃xff0c;包含iframe的document是不响应任何事件的&＃xff0c;所以需要给iframe绑定类似的事件&＃xff0c;当iframe指向的是第三方的内容时&＃xff0c;还在考虑跨域的问题&＃xff0c;因此通过操作iframe的document是行不通的&＃xff0c;还好有document.activeElement可供我们使用&＃xff0c;解决方案如下&＃xff1a;

var IframeOnClick &＃61; {resolution: 200,iframes: [],interval: null,Iframe: function() {this.element &＃61; arguments[0];this.cb &＃61; arguments[1]; this.hasTracked &＃61; false;},track: function(element, cb) {this.iframes.push(new this.Iframe(element, cb));if (!this.interval) {var _this &＃61; this;this.interval &＃61; setInterval(function() { _this.checkClick(); }, this.resolution);}},checkClick: function() {if (document.activeElement) {var activeElement &＃61; document.activeElement;for (var i in this.iframes) {if (activeElement &＃61;&＃61;&＃61; this.iframes[i].element) { // user is in this Iframeif (this.iframes[i].hasTracked &＃61;&＃61; false) { this.iframes[i].cb.apply(window, []); this.iframes[i].hasTracked &＃61; true;}} else {this.iframes[i].hasTracked &＃61; false;}}}}
};


再然后调用它就可以了&＃xff1a;

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


其实主要通过焦点匹配来进行监听的,所以你在它的点击函数里改变一下焦点 $body.focus(); 这样在子页面随便哪个地方点击都可以执行alert()函数

其他小知识&＃xff1a;

在网页中&＃xff0c;如何获取嵌入网页中的iframe内的document 对象呢&＃xff1f;

1、第一种访问方法

这种写法估计很多人都没有用过&＃xff1a;

document.getElementById(‘iframe1’).Document

注意&＃xff1a;这里的获取document对象使用的是大写的Document&＃xff0c; 若写成小写的document对象则指当前网页的document对象。

测试方法&＃xff1a;

document.getElementById(‘iframe1’).document.writeln(‘test is ok’); //结果&＃xff1a;当前网页页面输出test is ok

document.getElementById(‘iframe1’).Document.writeln(‘test is ok’); //结果&＃xff1a;嵌入网页&＃xff08;iframe1&＃xff09;页面输出test is ok

//iframe的document对象
document.getElementById(&＃39;iframe1&＃39;).Document


//当前网页的document对象
document.getElementById(&＃39;iframe1&＃39;).document


2、第二种访问方法

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

iframe里面的元素触发父窗口元素事件的jquery代码
例如父窗口定义了一个事件。

top:

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

那么iframe里面的元素怎样触发父窗口dom1的事件呢&＃xff1f;这样吗&＃xff1f;

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

看似正确&＃xff0c;实则误导人。

因为父窗口的jquery对象与iframe里面的jquery对象实际为两个对象&＃xff08;function&＃xff09;&＃xff0c;iframe里面的jquery并不会触发另一个jquery对象定义的事件。除非你在iframe这样定义了&＃xff1a;

iframe:

self.$ &＃61; parent.$;

所以解决的方法很简单&＃xff1a;

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

调用父jquery执行该事件就行了。

话说iframe应该不必再引进jquery文件的&＃xff0c;与父窗口共用一个jquery就行了&＃xff0c;这样很环保。