14

All of the following will successfully redirect a user to another page (with their own caveats, of course):

  • window.location.replace(new_url),
  • window.location.assign(new_url),
  • window.location = new_url,

The typical response to someone asking if you can get a callback for changing location is, of course, no, because whisking a user off to a new page means the scripts on your page are no longer active.

That's all fine and dandy, but in the case where you are using any of the three methods above to download a file, not only does the user stay on the same page as they are on, but there is also a slight lag (depending on network speeds) between updating location and when the file actually starts downloading.

In this situation (the user remaining on the page in which window.location was updated), is there any way to create a callback that would enable, for example, a loading icon being displayed the line prior to the redirect up until the file actually starts downloading?

Community
  • 1
  • 1
drusepth
  • 393
  • 3
  • 14
  • 1
    [See this old question of mine.](http://stackoverflow.com/questions/2064882/what-are-techniques-to-get-around-the-ie-file-download-security-rules) In particular, T. J. Crowder's answer works great. – Pointy Aug 26 '14 at 19:50
  • And what you're really saying here is that you're redirecting to a file with the correct headers and response code so the page doesn't really redirect, it just starts a download. If so, you can just show the loading images on the line above the redirect, and remove it on the line below, as the "lag" is the browser halting. – adeneo Aug 26 '14 at 19:51
  • @adeneo Placing code immediately after the redirect is firing before the file starts downloading. I assume the "lag" is actually waiting on the server to respond with the requested file. – drusepth Aug 26 '14 at 20:17
  • Then look at what @Pointy posted, using a cookie set from the server when the file starts and an interval to check for such a cookie is a common solution to such problems. – adeneo Aug 26 '14 at 20:24

2 Answers2

4

You can create a hidden iFrame, pointing at the downloadable file. The user won't notice the difference, at the same time you can continue running scripts on the main document.

function downloadURL(url, callback){
   var hiddenIFrameID = 'hiddenDownloader' + count++;
   var iframe = document.createElement('iframe');
   iframe.id = hiddenIFrameID;
   iframe.style.display = 'none';
   document.body.appendChild(iframe);
   iframe.src = url;
   callback();
}
downloadURL("http:\\...", function() { alert('is downloading'); });
David Thomas
  • 249,100
  • 51
  • 377
  • 410
Semyon Krotkih
  • 149
  • 4
0

I wrote the following code being inspired by @Semyon Krotkih answer. It users jQuery. Also it doesn't have any error support, but it works :)

function downloadURL(url, callback) {

    var id = 'hiddenDownloader';
    $('body').append('<iframe id="' + id + '" style="display: block" src="' + url + '"></iframe>');

    var $iframe = $('#' + id);
    $iframe.on('load', function () {
        $iframe.remove();
        // no error support
        callback();
    });
}


downloadURL('http://example.com', function() {
  alert('Done');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
infografnet
  • 3,749
  • 1
  • 35
  • 35
  • 1
    This does not work for me. No js errors, just nothing. The download happens just fine, but the alert never shows. – callisto Mar 09 '18 at 13:31