Angular

1. 使用

 <iframe id='iframe' width='100%' height='400px' frameborder='no' border='0' scrolling='no' src={this.url} />

2. 窗体传值

frame加载完成再处理传值

const iframe: any = document.querySelector('#iframe');
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', () => {
        this.updateIframeAttribute(iframe);
      });
    } else {
      iframe.onload = () => {
        this.updateIframeAttribute(iframe);
      };
    }

通过postMessage  窗体传值

private updateIframeAttribute(iframe: any) {
    iframe.contentWindow.postMessage(this.instanceRecords || [], '*'); // 传送数据,xxx
}

接收值

private messageSub: Subscription;

  if (this.messageSub) {
      this.messageSub.unsubscribe();
    }
    this.messageSub = fromEvent(window, 'message').subscribe((s: any) => {
      if (s.data instanceof Array) { // 这里通过传送过来的数据类型,来区分message 多次触发问题
        console.log(s.data);
        this.instanceRecords = s.data;
       }
    });

  

原文地址:https://www.cnblogs.com/ctfyfd/p/13742973.html