Denny Mueller Denny Mueller - 1 year ago 441
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 Source

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