Angular, onLoad function on an iFrame

IframeAngularjs

Iframe Problem Overview


I have this iframe working with basic JavaScript:

<iframe id="upload_iframe" name="upload_iframe" onLoad="uploadDone();"></iframe>

Which triggers the method uploadDone(); when the content of the iframe has been loaded.

How do I do the same thing in Angular?. I want to call a function on the controller when the iframe loads, but I haven't seen a ng-onload so far.

Iframe Solutions


Solution 1 - Iframe

Commenting on a year old question. For cases where there are more than 1 iframes, I needed to bind "onload" events on to. I did this approach.

Directive

APP.directive('iframeOnload', [function(){
return {
    scope: {
        callBack: '&iframeOnload'
    },
    link: function(scope, element, attrs){
        element.on('load', function(){
            return scope.callBack();
        })
    }
}}])

Controller

APP.controller('MyController', ['$scope', function($scope){

	$scope.iframeLoadedCallBack = function(){
		// do stuff
	}
}]);

DOM

<div ng-controller="MyController">
    <iframe iframe-onload="iframeLoadedCallBack()" src="..."></iframe>
</div>

Solution 2 - Iframe

try defining the function within controller as:

window.uploadDone=function(){
  /* have access to $scope here*/
}

Solution 3 - Iframe

For anyone using Angular 2+, It's simply:

<iframe (load)="uploadDone()"></iframe>

No global function, works with multiple iframe.

Solution 4 - Iframe

For anyone ending up here, the ng-onload plugin is the perfect solution to this issue. It doesn't pollute the global namespace and doesn't require you to create one-off directives when all you want is to call a simple scope function.

Solution 5 - Iframe

for those that inject the iframe dynamically, you could do the following

html...

<div #iframeContainer></div>

ts...

@Component({
  selector: 'app-iframe-onload',
  templateUrl: './iframe-onload.component.html'
})
export class IframeOnload implements AfterViewInit {

@ViewChild('iframeContainer') iframeContainer: ElementRef;

ngAfterViewInit(): void {
  this.injectIframe();
}

private injectIframe(): void {
  const container = this.iframeContainer.nativeElement;
  const iframe = document.createElement('iframe');
  iframe.setAttribute('width', '100%');
  iframe.setAttribute('src', 'https://example.com/');
  iframe.setAttribute('height', 'auto');
  iframe.setAttribute('frameBorder', '0');
  iframe.addEventListener('load', this.iframeOnLoadtwo);
  container.appendChild(iframe);

}

public iframeOnLoadtwo(): void {
  console.log('iframe loaded...');
}

}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJerome AnsiaView Question on Stackoverflow
Solution 1 - IframeMiguel Felipe Guillen CaloView Answer on Stackoverflow
Solution 2 - IframecharlietflView Answer on Stackoverflow
Solution 3 - IframeHaijinView Answer on Stackoverflow
Solution 4 - Iframefisch2View Answer on Stackoverflow
Solution 5 - IframeCraig WayneView Answer on Stackoverflow