给iframe添加点击事件

方案一:无本地源码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中的点击方法中执行具体需要执行的方法。

你可能感兴趣的:(javascript)