开发者

Download binary without triggering onbeforeunload

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?


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.


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

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

From this answer.


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?


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).


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜