Question

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

Answer 1

<强> 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转到原始窗口。所以你可以做的是：

您在角应用程序的窗口对象上注册了一个函数。
您在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');

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

2 个答案: