Javascript 区分文件下载和页面更改的onbeforeunload

我有一个

onbeforeunload

事件，该事件应该在用户进入新页面时被触发。它工作得很好，但我发现，在Chrome中，每当用户从他们所在的页面下载文件时，它也会被触发

我想知道事件是否被触发，因为它是由文件下载触发的。最好的方法是什么

编辑：作为澄清，在卸载之前，我不拥有我正在收听的网站。该事件由安装在第三方网站上的Javascript片段收听。

Javascript解决方案 这是我能想到的唯一一个“干净”的方法&似乎效果很好

---

在您的问题中再添加一些代码，说明您实际上是如何使用“onbeforeunload”的，这将非常好

但我假设您正在使用类似下面的代码的光标“加载…”动画

/* Loading Progress Cursor
 * 
 * Tested on:    IE8, IE11, Chrome 37, & Firefox 31
 * 
 * [1] the wildcard selector is not performant but unavoidable in this case
 */ 
.cursor-loading-progress,
.cursor-loading-progress * { /* [1] */
  cursor: progress !important;
}

---

解决方案 第一步：

/* hooking the relevant form button
 * on submit we simply add a 'data-showprogresscursor' with value 'no' to the html tag
 */
$(".js-btn-download").on('submit', function(event) {
    $('html').data('showprogresscursor', 'no' );
});

/* [1] when page is about to be unloaded
 * [4] here we have a mechanism that allows to disable this "cursor loading..." animation on demand, this is to cover corner cases (ie. data download triggers 'beforeunload')
 * [4a] default to 'yes' if attribute not present, not using true because of jQuery's .data() auto casting
 * [4b] reset to default value ('yes'), so default behavior restarted from then on
 */
var pageUnloadOrAjaxRequestInProgress = function() {
    /* [4] */
    var showprogresscursor = $('html').data('showprogresscursor') || 'yes';  /* [4a] */
    if( showprogresscursor === 'yes' ){
        $('html').addClass('cursor-loading-progress');
    }
    else {
        $('html').data('showprogresscursor', 'yes' );  /* [4b] */
    }
}

$( window ).on('beforeunload', function() {    /* [1] */
    pageUnloadOrAjaxRequestInProgress();
});

第二步：

/* hooking the relevant form button
 * on submit we simply add a 'data-showprogresscursor' with value 'no' to the html tag
 */
$(".js-btn-download").on('submit', function(event) {
    $('html').data('showprogresscursor', 'no' );
});

/* [1] when page is about to be unloaded
 * [4] here we have a mechanism that allows to disable this "cursor loading..." animation on demand, this is to cover corner cases (ie. data download triggers 'beforeunload')
 * [4a] default to 'yes' if attribute not present, not using true because of jQuery's .data() auto casting
 * [4b] reset to default value ('yes'), so default behavior restarted from then on
 */
var pageUnloadOrAjaxRequestInProgress = function() {
    /* [4] */
    var showprogresscursor = $('html').data('showprogresscursor') || 'yes';  /* [4a] */
    if( showprogresscursor === 'yes' ){
        $('html').addClass('cursor-loading-progress');
    }
    else {
        $('html').data('showprogresscursor', 'yes' );  /* [4b] */
    }
}

$( window ).on('beforeunload', function() {    /* [1] */
    pageUnloadOrAjaxRequestInProgress();
});

注意，我使用

$（'html'）.addClass（'cursor-load-progress'）在我的示例中，这是预期的CSS，但此时您可以做任何您喜欢的事情


另外两个解决办法可能是：


在新选项卡中打开文件下载页面的步骤
在文件下载完成后触发页面刷新
如果将download=“[FILENAME]”添加到a标记中，似乎可以防止onbeforeunload触发：

<a download="myfile.jpg" href="mysite.com">click me</a>



这是一个简单得多的解决方案。您可以省去文件名，只需说“下载”即可使用默认文件名。我要指出的是，这有一个副作用，就是强制重新下载而不是使用缓存。我认为这是2012年添加到chrome和ff中的。不确定是否支持safari或ie。
很抱歉，我应该说得更清楚一些，我在卸载之前没有自己的网站。这是我为一个小部件创建的。@dshipper我意识到这有点晚了，但我发现了一个很好的解决方法，可以使用一些非干扰性javascript，请参见下面我的答案。您认为呢？这可以很好地与
target=“\u blank”
配合使用，这在不支持
下载的浏览器中很有帮助，就像所有Internet Explorer版本一样。对于那些人，它会在短时间内打开一个新标签。那些具有适当的
下载
支持的用户将立即开始下载，并且不会打开新选项卡。IE.FWIW不支持“下载”，这在Chrome中对我来说非常有效，尽管在我的情况下，我通过Javascript编程设置属性（如
a.setAttribute（'download'，filename | 1）
）。好奇地想知道这是否仍然适用于任何人，或者@tirdadc是否遇到了一个Chrome bug，该bug已经被修复……在Chrome中不适用于跨源请求。另见