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

Issue

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?

Solution

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.

Answered By - rtcherry