下载二进制文件时避免触发onbeforeunload事件

Question

我想在用户单击链接时启动文件下载，但是我有一个onbeforeunload处理程序，我不希望在下载开始时调用它。目前，我使用一个href设置为文件位置的，但是在Chrome中单击会导致onbeforeunload被调用（但在FF中不会）。

我知道可以设置一个私有标志并在onbeforeunload处理程序中进行检查，但是否有一种使用ajax启动下载的方法？我仍然希望用户在下载文件时看到通常的对话框（打开/保存等）。

有什么想法吗？

- psychotik

Answer 1

构建一个iframe并从其中触发下载是最佳的方法。

我已在Chrome、IE6+和Firefox中进行了测试，这种方法似乎在它们所有的浏览器中都能工作。

示例代码：

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

如果您只需要进行一次下载（因为我们已经硬编码了一个ID），那么这将正常工作，但如果您要触发多次下载，则建议通过将其存储在更广泛可访问的变量中来重用iframe。

- tgallard

---

我正在开发的应用记录浏览器数据。这修复了我们数据中的一个错误。谢谢！ - Hcabnettek

将iFrame附加到您的body中会在下方添加空白空间吗？ - theB3RV

截至2017年1月，我认为Felix的解决方案是最好的。 - veered

Answer 2

在a标签中添加download属性，这似乎可以防止onbeforeunload事件触发：

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

来源于这个答案.

- Felix

---

这是我个人认为的正确答案。它直接解决了问题，而不提出下载文件的其他方法。 - logidelic

Answer 3

我猜在链接上使用target属性可能会起作用。

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

如果不使用frameset文档类型，则不会验证，但可能会工作。它将创建一个新的选项卡或窗口，然后弹出文件下载（如果http头说应该），但它可能会保留新的选项卡/窗口，或者在保存后关闭它们...

另一方面，我认为拥有一个有时不想触发的onbeforeunload处理程序听起来很可疑，你为什么需要这个呢？

- Stein G. Strindhaug

---

谢谢，我考虑过这个方法，但打开的选项卡仍然是空白的，并且停留在那里，这不是我想要的体验。我需要onbeforeunload处理程序询问用户是否保存未更改的编辑（就像在SO上）。 - psychotik

Answer 4

我知道这个回答有点晚，但是有一个简单的解决办法。通过JavaScript动态创建一个iframe，并将其“src”设置为您的下载链接。这样可以启动下载而不触发卸载事件（我认为）。

- Jerod Venema

Answer 5

download属性答案对我很有用，但在我注意到它之前，我尝试了这个方法，也起作用。以防万一，在其他不是下载链接的情况下也可能有用。

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

- Bob Kanefsky