如何检测iframe是否在angular中完全加载

how to detect if the iframe is fully loaded in angular

本文关键字:angular 加载 是否 iframe 何检测 检测      更新时间:2023-09-26

如果iframe已完成加载,我是否可以检测到它?这是我的iframe代码:

<div ng-if="isLoadDone" class="col-xs-12">
    <div class="text-center"><span class="fa fa-spinner fa-pulse fa-5x fa-fw margin-bottom"></span></div>
  </div>
<iframe ng-if="isLoadDone" class="app-iframe" ng-src="{{trustedApplUrl}}"></iframe>

基本上,如果iframe没有完全加载,我想显示微调器。我想检测iframe是否已完成加载而不是开始加载。我找到了一种方法来确定iframe是否开始加载,但不能确定何时完成加载。知道吗?谢谢-Kim

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

组件内

myLoadEvent(){
// do your task
}

这适用于angular6。这并不是为了确定iframe是否已完全加载。但将帮助任何在这里登陆iframe的人加载

我发现了其他几种方法可以使它与IE11和Angular 4一起工作。

  1. 使用Renderer2

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

  2. 向窗口添加回调

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

对于这样的事情,您可以使用ng onload。

<iframe ng-onload="myLoadEvent()" class="app-iframe" ng-src="{{trustedApplUrl}}"></iframe>