如何在 Angular 7 中订阅 iframe 的 src 更改答案

【问题标题】：How to subscribe to src Change of Iframe in Angular 7如何在 Angular 7 中订阅 iframe 的 src 更改
【发布时间】：2019-06-07 09:31:56
【问题描述】：

我们正在寻找一种从 Angular 7 应用程序中的 IFrame 订阅 src (url) 更改的方法。有没有办法拦截 src 变化？

【问题讨论】：

也许与 iframe 的加载事件有关？还是 MutationObserver？

标签： angular iframe

【解决方案1】：

其实它比你想象的要简单，你甚至不需要fromEvent 和rxjs。只需像这样收听load 事件：

<iframe [src]="src" (load)="test()"></iframe>

这是一个有效的Stackblitz

如果你想要 iframe 参考，你也可以在没有 ViewChild 的情况下轻松获得它：

<iframe #frame [src]="src" (load)="test(frame)"></iframe>

【讨论】：

【解决方案2】：

您可以使用 RxJS fromEvent 构造函数从 iFrame 获取“加载”事件并订阅其更改。如果需要，您可以使用 RxJS 跳过运算符来忽略初始加载事件。

这是您可以做什么的要点，但我也在答案底部链接了一个完整的 stackblitz 示例。

@ViewChild('iframe') iframe: ElementRef;

ngAfterViewInit(): void {
    fromEvent(this.iframe.nativeElement, 'load')
      // Skip the initial load event and only capture subsequent events.
      .pipe(skip(1))
      .subscribe((event: Event) => console.log(event.target));
}

跳过文档： https://www.learnrxjs.io/operators/filtering/skip.html

来自活动文档： https://www.learnrxjs.io/operators/creation/fromevent.html

全栈闪电战示例： https://stackblitz.com/edit/angular-dxmbgp

【讨论】：