How to detect a click event on a cross domain iframe (iframe.tracker)

iframe-tracker.component.html

<div>
  <iframe appIframeTracker (iframeClick)="onIframeClick()" src="http://www.google.com"></iframe>
</div>

iframe-tracker.directive.ts

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);
    }
  }
}

Okay. But can you provide some help about how can we track/capture multiple events? Thank you!

I don’t think is possibile, if you own the code inside the iframe you should use window.postMessage to communicate cross window. Il giorno lun 6 lug 2020 alle 13:59 Muneeb Riaz <[email protected]> ha scritto:

***@***.**** commented on this gist. ------------------------------ Okay. But can you provide some help about how can we track/capture multiple events? Thank you! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/db03a814eaf4cd8abf95f77885d9316f#gistcomment-3365519>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMO2O4KAH4ANIAVS6FKVQ3R2G4C5ANCNFSM4MW75SZQ> .

-- Michael Denny Engage IT Services s.r.l. <http://www.engageitservices.it/> CTO, Co-Founder

Hi @micdenny

Do you have a unit test spec file for this iframe-tracker.directive.ts? If yes can you please share them ?

This is great, exactly what i need.
Any idea on how to make this work with touch devices as well?
I tried touchstart and touchend without success.

My use case is a logout timer, which i need to reset on every interaction.
But in one specific case this interaction is inside an iframe.

Do you have a unit test spec file for this iframe-tracker.directive.ts? If yes can you please share them ?

no, I don't have, sorry

Any idea on how to make this work with touch devices as well?
I tried touchstart and touchend without success.

I never thought about it, sorry

My use case is a logout timer, which i need to reset on every interaction.
But in one specific case this interaction is inside an iframe.

as I said above, you can't really intercept interaction inside the iframe, when the user click on the iframe the user is in a completely different windows that is a sandbox and it is strictly limited what you can do: https://www.w3docs.com/learn-javascript/cross-window-communication.html

Thanks for the swift reply.
I understand that i cannot intercept the interaction inside the iframe. That's also not what i need. All i need to know is that there is any interaction. Just like your script does. But i would also need it for touch devices and not only desktop. But nevermind. Maybe that is not the way to go for me.

But what if i need type something inside the iframe?? it's imposible because always lose the focus on the textarea inside the iframe. Am i right ??