Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to detect if the iframe is fully loaded in angular

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

like image 265
Kim Avatar asked Apr 19 '16 16:04

Kim


People also ask

How do I know if my iframe is finished loading?

setTimeout(function(){ if (//something shows iframe is loaded or has content) { //my code } else { $('#myIframe'). attr("src",""); //stop loading content } },5000);

Does iframe block page load?

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.


1 Answers

<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

like image 64
natrayan Avatar answered Sep 20 '22 04:09

natrayan