Denny Mueller Denny Mueller - 1 month ago 67
AngularJS Question

Get onload event of an angular.element iframe

I am trying to get an onload event on an added iframe. This happens inside a service function call. Its supposed to download a file, what works fine. But I need to wait until the iframe is loaded to return a promise resolve.
The reduced code with the problem is:

iFrame = angular.element('<iframe id="blaba" style=\'position:fixed;display:none;top:-1px;left:-1px;\'/>')
angular.element(document.body).append iFrame
# onload bind here
iFrame.attr('src', url)


I tried it with

iFrame.onload = ->
$log.info 'iframe loaded'


Also

iFrame.on 'load', (event) ->
$log.info 'iframe loaded'


I also tried to select the Iframe via its id and bind the load event on that. But also doesn't work.
Any ideas or suggestions?

best regards

Answer

try

app.controller('MainCtrl', () => {
  var iFrame = angular.element('<iframe id="blaba" height="200"/>')
  angular.element(document.body).append(iFrame);
  // onload bind here
  var url = 'test.txt';
  iFrame.attr('src', url);
  iFrame.on('load', event => console.log('IFRAME LOADED'))
});

plunker: https://plnkr.co/edit/XeaYCmG6L6NG2T1zaCfN?p=preview