Is there any way to trigger a callback after a window.location change is finished?

Question

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?

Answer 1

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'); });