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
setTimeout(function(){ if (//something shows iframe is loaded or has content) { //my code } else { $('#myIframe'). attr("src",""); //stop loading content } },5000);
It shouldn't block. If you want the main page to fully load first (eg, main page's images before iframe content) then you'll have to use a bit of javascript to set the url of the iframe, like <body onload="javascript:..."> Main document's onload won't fire until all iframes have been loaded.
<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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With