给iframe添加点击事件

最新推荐文章于 2024-09-21 14:14:56 发布

原创最新推荐文章于 2024-09-21 14:14:56 发布 · 1.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #父子页面互调

javascript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了解决iframe跨域点击监听的两种方法：一种是通过document.activeElement和setInterval结合使用来实现；另一种是在本地源码的iframe中直接调用父窗口的方法。提供了具体的JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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