如何在 iframe 显示的网页中调用 JavaScript function，从文件 Z558B54Z4CF685F39D6E734

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

Answer 1

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!');
}

};