如何使用 angular2 从 iframe 元素内部触发单击事件

Question

在我的代码片段中，我有一个加载另一个网址的iframe。由此，我需要使用 angular2 从 iframe 内部单击按钮，在 iframe 外部触发一个方法。还需要从 iframe 内部获取数据。任何人都可以提供解决方案来实现这一目标。

Answer 1

使用 postMessage

app.component.ts

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
@Component({
  selector: 'ncs-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  src;   
  constructor() { 
    //Yes, is  the same page.
    this.src = this.sanitizer.bypassSecurityTrustResourceUrl('http://localhost:4201');    
    //listen for post messages for this url
    window.addEventListener('message', this.receiveMessage, false);
  }
  receiveMessage(event) {
    console.log(event);
  }
  click() {
    //post message to http://localhost:4201
    window.postMessage('asdasd', 'http://localhost:4201');
  }
}

app.component.html

<button class="button" (click)="click()" >
</button>
<iframe #iframe id="tcsFrame"
        [src]="src"
        scrolling="no"
        frameBorder="0"
        width="100%"
        height="32000px"
        type='text/html'>
</iframe>

Answer 2

如果您可以控制 iframe 中的内容，则可以使用 window.opener 访问原始窗口。因此，您可以执行以下操作：

1. 在角度应用的窗口对象上注册一个函数。
2. 你在iframe中使用window.opener来调用所述回调。

1. 寄存器功能

在你的角度代码中的某个地方，你需要在窗口对象上注册一个回调函数：

// Run this method to setup the iframe callback
setupCallback() {
    window.iframeCallback = (param: any) => this.actualCallback(param);
}
// This method will be executed when you
actualCallback(param: any) {
    console.log('Callback executed:', param);
}

2. 从 iframe 调用函数

然后在你的iframe中，你可以使用以下javascript：

window.opener.iframeCallback('Hello World');