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

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

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

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

3 ответа

Работа javascript вокруг

Это единственная "чистая" работа, о которой я мог подумать, и, похоже, она работает нормально.

Еще один код в вашем вопросе, показывающий, как вы на самом деле используете "**************", будет большим.

Но я предполагаю, что вы используете что-то вроде кода ниже для анимации курсора "Загрузка...".

/* 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 '************')
 * [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('************', function() { /* [1] */
 pageUnloadOrAjaxRequestInProgress();
});

Обратите внимание, что я использую $('html').addClass('cursor-loading-progress');, так как это ожидаемый CSS в моем примере, но вы можете просто сделать все, что вам нравится на данный момент.

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

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


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

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

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


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

window.on************ = null;

licensed under cc by-sa 3.0 with attribution.