Don't work with IFRAME

[sdvivas]

I have a project in angular 12 that uses IDLE and IFRAME, but the events of each IFRAME are not heard from the main project. How can i get this events or propagate Iframe events to the main project??

[TomLBarden]

I'm also having this same issue. It'd be great to know if anyone has any workaround for this.

[TomLBarden]

@sdvivas I developed a potential workaround before I realised that my use-case means this will never work; my iframe holds content from a different domain so CORS protection prevents me accessing the content of the iframe. Pasting the code here in case it helps you or someone else. It's untested, but use it as a bouncing-off point.

const iFrame = document.getElementById('iFrame');
      var iWindow = (<HTMLIFrameElement> iFrame).contentWindow;
      // The events you want to listen to
      const events = [
        'mousemove',
        'mousedown',
        'mouseenter',
        'mouseleave',
        'click'
      ];
      events.forEach(event => {
        iWindow.addEventListener(event, (event: MouseEvent) => {
          console.log(event);
          this.idle.interrupt();
        });
      });

[richinator38]

Using @TomLBarden above code, I was able to get this to work. It did interrupt too much but I was able to throttle it using rxjs throttleTime and an eventEmitter in Angular 12.