28

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

我希望能够判断事件是否被触发，因为它是由文件下载触发的。最好的方法是什么？

编辑：作为澄清，我不拥有我正在收听的网站onbeforeunload。该事件由安装在 3rd 方网站上的 Javascript 片段收听。

4

2 回答 2

20

如果您将 download="[FILENAME]" 添加到 a 标签，它似乎会阻止 onbeforeunload 触发：

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

这是一个更简单的解决方案。您可以省略文件名，只需说“下载”即可使用默认文件名。让我指出这具有强制重新下载而不是使用缓存的副作用。我认为这是在 2012 年添加到 chrome 和 ff 中的。不确定 safari 或 ie 支持。

于 2014-11-13T22:22:00.197 回答
1

一个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();
});

请注意，我$('html').addClass('cursor-loading-progress');在示例中使用的是预期的 CSS，但此时您可以做任何您喜欢的事情。

另外几个解决方法可能是：

  • 在新选项卡中打开文件下载页面
  • 文件下载完成后触发页面刷新
于 2014-10-08T09:33:42.610 回答