Question

我们正在寻找一种方法来从Angular 7应用程序中的IFrame订阅src（URL）更改。有没有办法拦截src更改？

Answer 1

实际上，它比您想象的要简单，甚至不需要fromEvent和rxjs。只需像这样监听load事件：

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

这是有效的Stackblitz

如果要使用iframe引用，也可以不使用ViewChild轻松获得它：

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

Answer 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

完整StackBlitz示例： https://stackblitz.com/edit/angular-dxmbgp

如何在Angular 7中订阅Iframe的src更改

2 个答案: