如何检测 iframe 是否以角度完全加载

Question

Is there anyway that I can detect if the iframe is completed loading? This is my iframe code:

<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>

Basically I want to display the spinner if the iframe is not full loaded. I want to detect if iframe is completed loading not start loading. I was able to find the way to find out if the iframe starts loading but not when the iframe is completed loading. Any idea? Thanks -Kim

Answer 1

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

In component

myLoadEvent(){
// do your task
}

This works in angular6. This is not to identify if iframe is fully loaded. But will help anyone who lands here for iframe load

Answer 2

I found a couple other ways to make it work with IE11 and Angular 4.

1. Using Renderer2

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

2. Adding callback to window

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

Answer 3

您可以将ng-onload用于此类事情。

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