爲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(element, cb) {
this.element =element;
this.cb = cb;
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;
}
}
}
}
};
//調用方法,選中iframe對象,和要綁定的事件
IframeOnClick.track(document.getElementById("iFrame"), function() { alert('a click'); });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章