Detect Click into Iframe Using JavaScript

Detect Click into Iframe using JavaScript

Is something like this possible?

No. All you can do is detect the mouse going into the iframe, and potentially (though not reliably) when it comes back out (ie. trying to work out the difference between the pointer passing over the ad on its way somewhere else versus lingering on the ad).

I imagine a scenario where there is an invisible div on top of the iframe and the the div will just then pass the click event to the iframe.

Nope, there is no way to fake a click event.

By catching the mousedown you'd prevent the original click from getting to the iframe. If you could determine when the mouse button was about to be pressed you could try to get the invisible div out of the way so that the click would go through... but there is also no event that fires just before a mousedown.

You could try to guess, for example by looking to see if the pointer has come to rest, guessing a click might be about to come. But it's totally unreliable, and if you fail you've just lost yourself a click-through.

How to detect click event in iframe using jquery

You cannot detect a click event on an iframe. What can be done is you can place a overlapping layer on top of your iframe and capture the click event of the overlapping div. See below snippet:

$("#overlap").on("click",function(){  alert("click");  $("#overlap").css("z-index",-1);
});$("#htmlFrame").on("mouseleave",function(){  $("#overlap").css("z-index",1);});

#htmlDiv {    position: absolute;    top: 0px;    left: 300px;    height: 65px;    width: 113px;}
#htmlFrame {    position: absolute;    top: 0px;    left: 0px;    margin: 10px 10px 10px 10px;    padding: 0px 0px 0px 0px;    height: 63px;    width: 110px;}
#overlap{  position: absolute;  background-color:trasparent;  top: 0px;  left: 0px;  margin: 10px 10px 10px 10px;  padding: 0px 0px 0px 0px;  width: 110px;  height:63px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div id="htmlDiv">    <iframe id="htmlFrame"></iframe>  <div id="overlap"></div></div>

Detect click in iframe

Iframes are a bit different in that you have to load them and get their contents before you can do anything with it:

$('#ptifrmtgtframe').on('load', function() {
  var iframe = $(this).contents();
  iframe.find('#CLASS_SRCH_WRK2_SSR_PB_CLASS_SRCH').click( function() {
    console.log("clicked");
  });
});

Detect click event inside iframe

I solved it by doing like this:

$('#filecontainer').load(function(){

        var iframe = $('#filecontainer').contents();

        iframe.find("#choose_pics").click(function(){
               alert("test");
        });
});

detect click into iframe using angular

You can try this Angular directive:

import {
  Directive,
  ElementRef,
  OnInit,
  Renderer2,
  Input,
  Output,
  EventEmitter,
  HostListener
} from '@angular/core';

@Directive({
  selector: '[appIframeTracker]'
})
export class IframeTrackerDirective implements OnInit {
  private iframeMouseOver: boolean;

  @Input() debug: boolean;

  @Output() iframeClick = new EventEmitter<ElementRef>();

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    this.renderer.listen(window, 'blur', () => this.onWindowBlur());
  }

  @HostListener('mouseover')
  private onIframeMouseOver() {
    this.log('Iframe mouse over');
    this.iframeMouseOver = true;
    this.resetFocusOnWindow();
  }

  @HostListener('mouseout')
  private onIframeMouseOut() {
    this.log('Iframe mouse out');
    this.iframeMouseOver = false;
    this.resetFocusOnWindow();
  }

  private onWindowBlur() {
    if (this.iframeMouseOver) {
      this.log('WOW! Iframe click!!!');
      this.resetFocusOnWindow();
      this.iframeClick.emit(this.el);
    }
  }

  private resetFocusOnWindow() {
    setTimeout(() => {
      this.log('reset focus to window');
      window.focus();
    }, 100);
  }

  private log(message: string) {
    if (this.debug) {
      console.log(message);
    }
  }
}

It emits an output event when we click on IFrame.

Source: https://gist.github.com/micdenny/db03a814eaf4cd8abf95f77885d9316f

I hope it will help.

Detect Click into Iframe Using JavaScript