anuglar中获取iframe对象，用iframe进行postMessage通信

如果你想在 Angular 中获取 iframe 对象并确保 iframe 加载完成后调用 postMessage 发送消息，可以按照以下步骤进行操作：

在 HTML 模板中，使用 ngIf 来控制 iframe 的显示与隐藏，并为 iframe 添加一个标识符（例如 #myFrame）：

<button (click)="showIframe()">Show Iframe</button>

<iframe *ngIf="isIframeVisible" #myFrame (load)="onIframeLoad()"></iframe>

在组件的 TypeScript 文件中，定义相应的方法来处理 iframe 的加载和 postMessage 操作：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('myFrame', { static: false }) myFrame: ElementRef;
  isIframeVisible: boolean = false;

  showIframe() {
    this.isIframeVisible = true;
  }

  onIframeLoad() {
    const iframe = this.myFrame.nativeElement;
    // 确保 iframe 加载完成后调用 postMessage 发送消息
    iframe.contentWindow.postMessage('Your message', '*');
  }
}

在这个示例中，当点击按钮显示 iframe 后，ngIf 会根据条件渲染 iframe，同时会触发 iframe 的 load 事件，调用 onIframeLoad() 方法。在该方法中，通过 @ViewChild 获取到 iframe 元素的引用，然后可以访问 iframe 的 contentWindow 属性来发送 postMessage 消息。

方式二

作为 Angular 专家，你可以通过 ViewChild 和 ElementRef 来获取当前的 iframe 对象，并在 iframe 加载完成后调用 postMessage 方法发送消息。以下是一个示例代码：

首先，在你的组件模板中，定义一个按钮和一个带有 #myIframe 的 iframe：

<button (click)="showIframe()">显示iframe</button>
<iframe #myIframe style="display: none;" width="600" height="400" src="https://www.example.com"></iframe>

然后在你的组件类中，导入 ViewChild 和 ElementRef：

import { Component, ViewChild, ElementRef } from '@angular/core';

接着在组件类中添加 ViewChild 和 ElementRef 的实例，并创建一个方法来显示 iframe：

export class YourComponent {
  @ViewChild('myIframe', { static: false }) myIframe: ElementRef;

  showIframe() {
    this.myIframe.nativeElement.style.display = 'block';

    this.myIframe.nativeElement.onload = () => {
      this.postMessageToIframe();
    };
  }

  postMessageToIframe() {
    const iframeWindow = this.myIframe.nativeElement.contentWindow;
    iframeWindow.postMessage('Hello from parent!', 'https://www.example.com');
  }
}

在上面的代码中，我们使用 ViewChild 装饰器来获取带有 #myIframe 标识的 iframe 元素。然后在 showIframe() 方法中，当按钮被点击时，显示 iframe，并监听 iframe 的 onload 事件。一旦 iframe 加载完成，就会调用 postMessageToIframe() 方法。

在 postMessageToIframe() 方法中，我们获取 iframe 的 contentWindow，并使用 postMessage 方法向 iframe 发送消息。

这样，当点击按钮显示 iframe 时，确保 iframe 已加载完成后会发送一条消息给 iframe。

方式三, 获取iframe对象。

  @ViewChildren('iframeTest') iframes: QueryList<ElementRef>;


  ngAfterViewInit() {
    this.iframes.changes.subscribe((queryList: QueryList<ElementRef>) => {
      if (queryList.length > 0) {
        this.iframeTest = queryList.first;
        console.log('this.iframeTest', this.iframeTest);
        setTimeout(() => {
          this.iframeTest.nativeElement.contentWindow.postMessage(
            { destination: 'test' },
            'http://xx.xxxx.xx.xx:3000'
          );
        }, 1000);
      }
    });
    console.log('ifrmatest11111111111viewinit', this.iframeTest1);
  }

    
// 发送消息
var targetWindow = document.getElementById('target-frame').contentWindow;
var targetOrigin = 'https://www.example.com'; // 目标窗口的origin
targetWindow.postMessage('Hello', targetOrigin);

// 接收消息
window.addEventListener('message', function(event) {
  if (event.origin === 'https://www.example.com') {
    // 处理来自指定源的消息
    console.log('Received message: ' + event.data);
  }
});

 window.addEventListener('message', this.receiveMessage.bind(this), false);

 window.parent.postMessage(
   { destination: 'test' },
      'http://xxx.xxx.xxxx.xxx:4200'
   );


  @HostListener('window:message', ['$event'])
  public onPostMessage(event) {
    if (event.origin === window.location.origin && event.data.id) {
      const message: Message = event.data;
      this.id = message.id;
      this.description = message.description;
    }
  }

anuglar中获取iframe对象， 用iframe进行postMessage通信

猜你喜欢

anuglar中获取iframe对象，用iframe进行postMessage通信