在一次项目的需求下,我偶然发现一个问题,为什么我给iframe添加点击事件无效。
经过度娘的一番解释发现,iframe是没有点击事件的,神奇!
var iframe1 = document.querySelector('#iframeID')
iframe1.addEventListener('click', function() {
alert(66) //没有打印出来
})
然后网上流传一种解决办法是通过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.querySelector('#iframeID'), function() {
alert('a click');
});
经过测试发现,虽然可以勉强解决点击的问题,但是当你重复点击的时候,就不能触发点击事件。
最后,我想的是,其实点击iframe就是点击iframe里面的内容,那么我们知道iframe.contentWindow是可以获取iframe的内容的,我先把他打印出来惊奇发现,它其实是一个iframe的windows对象,包含了onclick属性,那就好办了,直接通过绑定绑定onclick事件就完事了
var iframe1 = document.querySelector('#iframeID')
var _iframe = iframe1.contentWindow;
console.log(_iframe)
_iframe.addEventListener('click', function() {
alert(55) //打印成功
})
当然,这仅限于不跨域的情况下!哈哈,跨域的解决办法暂时没有
谢谢观赏,如有不足,请下方留言,共勉之! ---一个菜鸡前端的路程