Calling components function from iframe

Same Origin Iframe

You can safely access the window.parent object, so you just need to put your SampleFunction in the global window object.

export class AppComponent { constructor(){  (<any>window).SampleFunction= this.SampleFunction.bind(this); } // use jquery to find the iframe and put a button into it addButtonToIFrame() {     ...     let buttonHtml = "<button onClick='parent.SampleFunction()'></button>"     ... } SampleFunction() {  ... }} 

If you have multiple instances of same class and your SampleFunction deals with the component state, you might need to create random name for your SampleFunction.

You could also use the PostMessage API which should be a more flexible alternative.

PostMessage API

If you are dealing with iframe from another domain, you can use the PostMessage API :

script inside iframe

window.parent.postMessage({foo:"foo"});

component inside parent

export class AppComponent { @HostListener("window:message",["$event"]) SampleFunction($event:MessageEvent) {  if (event.origin !== "protocol://my-expected-domain.tdl:port")    return;  console.log($event.data)// {foo:"foo"} }} 

Of course you have to check the event.origin against the actual domain of the iframe.