如果页面上有iframe时,鼠标点击在iframe内时,包含iframe的document是不响应任何事件的。所以需要给iframe绑定类似的事件,当iframe指向的是第三方的内容时,还要考虑跨域的问题,因此通过操作iframe的document是行不通的,还好有document.activeElement(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的ID"), function() {
//执行自己的代码,点击只能绑定一次哦。
});
监听方法只执行一次,之后无法再触发,原因在于当document被focus时被触发document.activeElement