Angular, onLoad function on an iFrame

Question

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.

Miguel Felipe Guillen Calo · Answer 1 · 2014-07-08T08:47:15.323

121

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>

edited Jul 08 '14 at 08:47

answered May 30 '14 at 06:09

Miguel Felipe Guillen Calo

1,503
2
11
15

2

Perfect, thanks for this directive. I changed the callback call in the directive by : `return scope.callBack(element);` so I can read element attributes back in my function. – Pandaiolo Jun 06 '14 at 13:52
Hmm or you could even return it as a promise! – Miguel Felipe Guillen Calo Jul 08 '14 at 08:40
I went on and edited the scope hash as you suggested. @Pandaiolo – Miguel Felipe Guillen Calo Jul 08 '14 at 08:48
2

I tried to pass element but was not accessible , is there a small working demo that you can share? – tomalex Aug 05 '14 at 21:54
1

Make sure your call back is a function, iframe-onload="iframeLoadedCallBack()" Make sure your call back accepts a parameter $scope.iframeLoadedCallBack = function(element) {...} – Miguel Felipe Guillen Calo Aug 07 '14 at 09:30
19

Miguel, your solution works great! But, please, for the people who copy-paste code, unhook the event handler on destroy: `scope.$on('$destroy', function() { element.off('load'); })` – ra00l Dec 20 '14 at 12:12
Please mark this as answer. This is working greatly. – Jeeva J Jun 29 '16 at 07:22

score 34 · Answer 2 · answered Sep 11 '19 at 21:16

34

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

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

No global function, works with multiple iframe.

answered Sep 11 '19 at 21:16

Haijin

2,561
2
17
30

@hajjin How I show loader until the uploadDone completes – Arul Dec 26 '19 at 04:20
You can have a variable showLoader, and display the loader based on it's value. Set it to true after loading start. and set it to false inside uploadDone. – Haijin Dec 26 '19 at 16:21
This is definetely the right answer in an angular context. – millenion Mar 04 '23 at 02:26

score 29 · Accepted Answer · answered Apr 08 '13 at 15:12

29

try defining the function within controller as:

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

answered Apr 08 '13 at 15:12

charlietfl

170,828
13
121
150

1

is there an option to pass angular params as well? such as `code`

– Leon Jul 02 '13 at 09:10
4

The downside to this is that it mixes a global function with Angular code. It works, but it could be confusing. Eg. "Would someone else reading the code expect to find it in the controller? Will it conflict with anything else?" – Adam Zerner Nov 26 '14 at 21:16

score 4 · Answer 4 · answered Dec 30 '15 at 18:12

4

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.

answered Dec 30 '15 at 18:12

fisch2

2,574
2
26
29

ngOnload only appears to return undefined with respect to the contentWindow for Angular 1.5.x. Have you used it on this version of AngularJS and had it work? – mtpultz Jul 26 '16 at 21:41

Craig Wayne · Answer 5 · 2021-03-14T21:43:46.167

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...');
}

}

Angular, onLoad function on an iFrame

5 Answers5

Linked