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?
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With