Различать onbeforeunload для загрузки файла с изменением страницы

У меня есть событие onbeforeunload, которое должно запускаться в любое время, когда пользователь переходит на новую страницу. Он работает достаточно хорошо, но я обнаружил, что он также запускается в Chrome в любое время, когда пользователь загружает файл со страницы, на которой они находятся.

Я хотел бы узнать, запускается ли событие, потому что оно запускается при загрузке файла. Какой лучший способ сделать это?

EDIT: В качестве пояснения я не владею сайтом, который я слушаю onbeforeunload on. Событие прослушивается фрагментом Javascript, который устанавливается на сторонних сайтах.

Ответы

Ответ 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;
}

Решение

1-й шаг:

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

2-й шаг:

/* [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 .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 в моем примере, но вы можете просто сделать все, что вам нравится на данный момент.

Еще одна пара задач:

  • Чтобы открыть страницу загрузки файла на новой вкладке
  • Чтобы запустить обновление страницы после завершения загрузки файла

Ответ 2

Если вы добавите в тег download = "[FILENAME]", то, кажется, не допустить onbeforeunload от стрельбы:

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

Это гораздо более простое решение. Вы можете оставить имя файла и просто сказать "загрузить", чтобы использовать имя файла по умолчанию. Позвольте мне отметить, что это имеет побочный эффект принудительной загрузки вместо использования кеша. Я думаю, что это было добавлено к chrome и ff в 2012 году. Не уверен насчет сафари или поддержки.

Ответ 3

Поиск через js файлы на вкладке отладчика Chrome chrome для beforeunload, если вы обнаружите, что он устанавливает точку останова и видит, почему и что передается ему при загрузке. Если вы не найдете ничего похожего на использование этого события, попробуйте отключить Chrome defaultEvent для onbeforeunload и посмотреть, продолжает ли он работать.

window.onbeforeunload = null;