How to get IFRAME url change event in ionic 3/4?

Question

My website is https://www.example.com/write , I want to use this page as IFRAME in ionic 4 application, I am already embedded. But I want URL change event of IFRAME, while I am working inside iframe in my app. For example, inside IFRAME, I have "Publish" button, on that button, I am redirecting page, but I want that click event in my ionic 4 app, that user has clicked "Publish" button, or if I can get the new url, using that I can get user get back to the app.

Here is sample code:

<ion-header>
  <ion-toolbar class="gradient-header font">
    <ion-title style="background: transparent;" class="light-back small-text-header">Write Story</ion-title>
    <ion-buttons slot="end">&nbsp;</ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content>
  <ion-grid fixed style="padding-right:0;">
    <ion-row style="padding-right:0;">
      <ion-col style="padding-right:0;">
        <iframe [src]="urlSafe" style="width: 100%; height: 100vh;border:none;"></iframe>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Here is TS file : write.page.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { Observable } from "rxjs";

@Component({
  selector: 'app-write',
  templateUrl: './write.page.html',
  styleUrls: ['./write.page.scss'],
})
export class WritePage implements OnInit {
  urlSafe: SafeResourceUrl;
  data:Observable<any>;
  n_link:string = 'https://www.example.com/write';

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.n_link);
  }

}

Answer 1

It looks like you need to use window.postMessage instead of detecting url changes of your iframe. As you can see below you can detect messages from your iframe:

// Called sometime after postMessage is called
function receiveMessage(event)
{
  // You can validate the origin of the message for security concerns
  if (event.origin !== "http://example.com:8080")
    return;

  console.log(event.data) //Message sent from an external page of your iframe
}

window.addEventListener("message", receiveMessage, false);

And Sending a message from your external page loaded into the iframe:

window.postMessage('Sending a message when Publish button is pressed')

Happy coding! <3

Answer 2

Tracking of events inside iFrames is very restricted in cross-domain sites.

In order to reliably track individual events, you should have access to the content of the page you are accessing and then send the event information back to your parent app with window.postMessage

However, there is a way to detect if the iframe has been clicked. Depending on your use case, this might or might not be enough for you, but if you are tracking simple interactions it might be enough. This is achieved by tracking which element is active in your HTML.

var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.tagName == 'IFRAME'){
        clearInterval(monitor);
        alert('clicked!');
    }
}, 100);

You can see a working example here: JSFiddle

A lengthy discussion on the topic here (just don't pay attention to the accepted reply, it is outdated)