如何在 Angular 8 中完全加载 iframe 内容后进行函数调用答案

【问题标题】：How to make a function call after iframe content is fully loaded in Angular 8如何在 Angular 8 中完全加载 iframe 内容后进行函数调用
【发布时间】：2020-07-29 13:45:07
【问题描述】：

正如我的问题所述，我想在 iframe 内容完全加载后确认/进行函数调用。

由于我使用的是 Angular 8，我更喜欢 typescript 而不是使用 Js/jquery 作为解决方案

这就是我所拥有的

HTML

<div class="container-fluid">
<iframe #iframe [src]="safeUrl"  style="width: 100%; height: 100vh;" frameborder="0" ></iframe>
</div>

  export class AppComponent  {
  url:string='http://..';
  safeUrl:SafeResourceUrl;
  @ViewChild('iframe', {static:true}) iframe:ElementRef;

  constructor(private sanitizer:DomSanitizer){ 
    
  }
  ngOnInit(){
    this.safeUrl=this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }
}

【问题讨论】：

你尝试实现 AfterViewInit 了吗？
是的，AfterViewInit 甚至在 iframe 完成加载之前进行函数调用

标签： angular typescript iframe

【解决方案1】：

使用加载事件

<iframe (load)="myLoadEvent()" id="myiframe"></iframe>

在组件中

myLoadEvent(){
// do your task
}

使用 Renderer2

<iframe #iframe id="iframe" name="pdfPreview" type="application/pdf"></iframe>
this._rndr.listen(this.iframeRef.nativeElement, 'load', (e) => { alert("works"); }

给窗口添加回调

<iframe onload="loadEvent(event)" id="iframe" name="pdfPreview" type="application/pdf"></iframe>
(window as any).loadEvent = (event) => alert("works too");

【讨论】：