how to call a function from iframe

Question

I have put an angular app inside an iframe, and I want to call his functions.

<iframe #iframe frameborder="0" src="http://localhost:4200/edit/username"></iframe>

http://localhost:4200/edit/username This link is a component of page-editor

export class PageEditorComponent implements OnInit...{
 @Input() eventMessage = { message: ''};

 handleEvent(eventMessage: { message: string; page: string }) {
    // if there are any possibility to put somethings in eventMessage 
    if (eventMessage.message.includes('tablette')) {
      this.loadIframe('tablette');
    }

  }
}

my aim is to call any function of PageEditorComponent from iframe

Answer 1

One of the other way to look at this is using the Window.postMessage() APIs to communicate from within the iframe to outside. And your angular code would have to look for messages/events. It would be more like a message bus for communication between the two sides.