Download binary without triggering onbeforeunload

Question

I want to kick off a file download for a user when he clicks a link, but I have an onbeforeunload handler that I don't want to get invoked when the download begins. To downloads, I currently have an <a> with the href set to the file location but clicking it results in onbeforeunload being invoked in Chrome (not in FF, though).

I know I can set a private flag and check that in the onbeforeunload handler, but is there some way to kick off the download using ajax? I still want the user to see the usual dialogs when they download the file (Open/Save etc).

Ideas?

score 11 · Answer 1 · edited Aug 02 '18 at 12:35

11

The best way to do this is indeed by constructing an iframe and triggering the download from there.

I have tested this in Chrome, IE6+ and Firefox and this approach seems to work in all of them.

Example code:

function DownloadFile(filePath) {
    var downloadIframe = $('<iframe />', 
        {
            id    :    'downloadIframe'        
        }).appendTo('body');
    downloadIframe.attr('src', filePath);
}

This will only work properly for a one off download (as we've hard coded an id), if you are triggering multiple downloads, then I suggest you reuse the iframe by storing it in a more widely accessible variable.

edited Aug 02 '18 at 12:35

ssten

1,848
1
16
28

answered Apr 19 '11 at 10:27

tgallard

381
3
9

An app I work on records browser data. This fixed a bug in our data. Thanks! – Hcabnettek Dec 27 '12 at 22:16
Will appending an iFrame to your body add blank space below? – theB3RV Mar 04 '15 at 15:14
As of January 2017, I think that Felix's solution is the best – veered Jan 20 '17 at 00:52

score 9 · Answer 2 · edited May 23 '17 at 12:25

9

Add the download attribute to the a tag, which seems to prevent onbeforeunload from firing:

<a download href="mysite.com"></a>

From this answer.

edited May 23 '17 at 12:25

Community

1
1

answered Nov 14 '14 at 04:06

Felix

3,783
5
34
53

This is the correct answer IMO. It solves the problem directly, without proposing a different way to download files. – logidelic Aug 23 '19 at 13:38

score 4 · Answer 3 · answered Mar 16 '10 at 12:58

I would guess using the target attribute on the link could do the trick.

<a href="http://www.example.com/somefile.zip" target="_blank">download</a>

Will not validate (unless using frameset doctype) but it might work.. It will create a new tab or window and then pop a file download (if the http header says it should), but it might leave the new tabs/windows open, or it might close them after saving...

On the other hand I think having a onbeforeunload handler that you sometimes do not want to trigger sounds suspicious, why do you need that anyway?

Thanks, i thought of this but the tab opened remains blank and sits around, which isn't the experience I would prefer. I need the onbeforeunload handler to ask the user to save unchanged edits (like on SO) — psychotik, Mar 16 '10 at 17:31

score 4 · Answer 4 · answered Nov 04 '10 at 16:02

4

I know this answer is really late, but there's a simple solution. Create an iframe dynamically, and set the "src" of it to your download url via JavaScript. This'll kick off the download without triggering the unload event (I think).

answered Nov 04 '10 at 16:02

Jerod Venema

44,124
5
66
109

Bob Kanefsky · Answer 5 · 2019-09-12T00:46:36.243

The download attribute answer worked well for me, but before I noticed it, I tried this, which also works. Just in case it's useful in some other cases that aren't download links.

var linksThatDisableWarning = $('a'); // all links
linksThatDisableWarning.on('mousedown', () =>
    window.isclicking = true);
linksThatDisableWarning.on('mouseup', () =>
    setTimeout(() => window.isclicking = false, 200))
window.addEventListener('beforeunload', (event) => {
  if (window.isclicking) return;
  event.preventDefault();
  event.returnValue = '';
});

Download binary without triggering onbeforeunload

5 Answers5

Linked