Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

'load' event not firing when iframe is loaded in Chrome

I am trying to display a 'mask' on my client while a file is dynamically generated server side. Seems like the recommend work around for this (since its not ajax) is to use an iframe and listen from the onload or done event to determine when the file has actually shipped to the client from the server.

here is my angular code:

    var url = // url to my api     var e = angular.element("<iframe style='display:none' src=" + url + "></iframe>");     e.load(function() {         $scope.$apply(function() {             $scope.exporting = false;  // this will remove the mask/spinner         });     });     angular.element('body').append(e); 

This works great in Firefox but no luck in Chrome. I have also tried to use the onload function:

e.onload = function()  { //unmask here } 

But I did not have any luck there either.

Ideas?

like image 571
lostintranslation Avatar asked Dec 13 '13 17:12

lostintranslation


People also ask

Can I use iframe onload?

We can use the onload event handler of the iframe HTML tag. The event fires once all the elements in the iframe is loaded. These include a loading of scripts, images, links, subframes etc.

How check iframe is loaded or not in JavaScript?

To check if iframe is loaded or it has a content with JavaScript, we can set the iframe's onload property to a function that runs when the iframe is loaded. document. querySelector("iframe"). onload = () => { console.

Does iframe affect performance?

Definitely iframe affects the page load performance and also it is not recommended to use iframe for many page security issues perspective. SEO companies strongly discourage iframes.


1 Answers

Unfortunately it is not possible to use an iframe's onload event in Chrome if the content is an attachment. This answer may provide you with an idea of how you can work around it.

like image 199
rtcherry Avatar answered Oct 04 '22 17:10

rtcherry