iframe 에 클릭 이벤트 추가

프로젝트 1: 로 컬 원본 없 음 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. getElement ById ("btn") 등 입 니 다.
인터넷 대신 이 가능 하 다 고 해서 나 는 해 본 적 이 없다.내 iframe 이 로 컬 에 있 기 때문에 로 컬 에서 수정 한 것 은 도 메 인 을 뛰 어 넘 는 방법 을 사용 하지 않 았 습 니 다.
프로젝트 2: 로 컬 소스 iframe 이 있 습 니 다.
iframe 의 구체 적 인 방법 실행 처 에서 부모 클래스 를 호출 하 는 방법, 예 를 들 어 $('\ # localbtn', window. parent. document). click ();부모 클래스 에 값 을 직접 부여 하 는 변수 도 가능 합 니 다.로 컬 코드 에 서 는 \ # localbtn 의 클릭 방법 에서 구체 적 으로 실행 해 야 할 방법 을 실행 할 수 있 습 니 다.