How do I call a JavaScript function in the webpage displayed by an iframe, from a TypeScript file in Ionic 4?

Question

How can I call a JavaScript function with parameters on it (foo('bar','yadda')) from my .page.ts file?

I have an Ionic 4 app with a page with an <iframe> on it that I need to call a JavaScript in the page displayed by the <iframe>. The .html file looks like this:

<ion-header>
</ion-header>

<ion-content>
  <iframe class='webPage' name="samplePage" [src]="cleanURL" width="100%" height="100%">
  </iframe>
</ion-content>

I intialize the the <iframe> in my .page.ts file like this:

ionViewDidEnter() {
  this.url = "https://example.com/mylegacysite"+ '?' + this.someParameter;
  this.cleanURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}

It initializes fine. But later on, it would be much more efficient to be able to run the the JavaScript function on https://example.com/mylegacysite instead of updating this.cleanURL

Tek choudhary · Accepted Answer · 2019-10-02 13:16:01Z

2

With different domains, it is not possible to call methods or access the iframe's content document directly.

You need to use cross-document messaging

For example in the top window:

myIframe.contentWindow.postMessage('Hello', '*');

and in your iframe:

window.onmessage = function(e){
if (e.data == 'Hello') {
    alert('It works!');
}

};

answered Oct 2, 2019 at 13:16

Tek choudhary

1781 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I call a JavaScript function in the webpage displayed by an iframe, from a TypeScript file in Ionic 4?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related