Как вызвать функцию JavaScript на веб-странице, отображаемой в iframe, из файла TypeScript в Ionic 4?

Question

Как я могу вызвать функцию JavaScript с параметрами (foo('bar','yadda')) из моего .page.ts файла?

У меня есть приложение Ionic 4 со страницей с <iframe>, которую янужно вызвать JavaScript на странице, отображаемой <iframe>. Файл .html выглядит следующим образом:

<ion-header>
</ion-header>

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

Я инициализирую <iframe> в моем файле .page.ts следующим образом:

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

Он инициализируется нормально. Но позже было бы намного эффективнее иметь возможность запускать функцию JavaScript на https://example.com/mylegacysite вместо обновления this.cleanURL

Answer 1

Для разных доменов невозможно вызывать методы или напрямую обращаться к документу содержимого iframe.

Вам необходимо использовать обмен сообщениями между документами

Напримерв верхнем окне:

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

и в вашем фрейме:

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

};