方案一:无本地源码iframe
存在跨域问题,所以需要用到document.activeElement
1.0处理方法:
export const 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
}
}
}
}
}
监听方法只执行一次,之后无法再触发,原因在于当document被focus时被触发document.activeElement
2.0处理方法:
export const IframeOnClick = {
resolution: 2000,
iframes: [],
interval: null,
Iframe: function () {
this.element = arguments[0]
this.cb = arguments[1]
},
track: function (element, cb) {
this.iframes.push(new this.Iframe(element, cb))
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
this.iframes[i].cb.apply(window, [])
var body = document.body
body.focus()
}
}
}
}
}
var body = document.body 可以换成其他的iframe内有效dom.如:var btn = document.getElementById("btn")等。
网络大神说可行,我没试过。因为我的iframe在本地,所以在本地进行修改的,没有采用这用跨域的方法。
方案二:有本地源码iframe
在iframe的具体方法执行处调用父类的方法,如:$('#localBtn', window.parent.document).click();或者直接将值赋给父类的某个变量既可。在本地代码中,可以在#localBtn中的点击方法中执行具体需要执行的方法。