Как обнаружить, что пользователь отменил загрузку страницы

Question

У меня есть веб-страница с базовой формой.Между нажатием кнопки «Отправить» и перезагрузкой страницы с результатами есть немалое время ожидания, поэтому я добавил небольшой счетчик, пока пользователь ожидает.

Это довольно просто, вот HTML:

<div id="loadingBox" style="display:none;">
    <!---put the actual loader here--->
</div>

Вот основной обработчик событий, позволяющий сделать счетчик видимым после нажатия пользователем кнопки «Отправить»:

$("#submitButton").submit(function(e)
{
    $("#loadingBox").css('display', 'block');
});

Проблема заключается в том, что пользователь может нажать кнопку «Отправить», отобразить окно и нажать клавишу «Escape».или нажмите кнопку браузера, чтобы отменить загрузку страницы, и спиннер продолжает вращаться.

Я добавил это, чтобы убрать счетчик, если он нажал escape:

$(document).keydown(function (e)
{
    if(e.keyCode == 27)
    {
        $("#loadingBox").css('display', 'none');
    }
})

Что можно сделать, чтобы определить, что пользователь нажал кнопку загрузки страницы отмены?Я не могу найти событие, которое срабатывает при нажатии этой кнопки, и я не могу найти состояние готовности или другой атрибут, который его отражает.Меня беспокоит то, что пользователь нажимает кнопку отмены загрузки, и тогда спиннер не уходит, а пользователь смотрит на вертушку, думая, что страница все еще что-то делает, но ничего не делает.

Answer 1

Вот так я решил свою проблему.

Сначала я преобразовал страницу для использования AJAX.Я использую Flask, и поэтому эта веб-страница была очень полезна: https://medium.com/@doobeh/posting-a-wtform-via-ajax-with-flask-b977782edeee

Но тогда мне нужно было обновить существующие шаблоны Jinja2 данными, полученными из AJAX.Я закончил тем, что сделал это, вызвав jsonify для функции render_template, как обсуждалось здесь: Визуализация Jinja после запроса JQuery AJAX к Flask

Но тогда мои кнопки для свертывания / расширения частей шаблонной таблицыне работали, так как оказывается, что события работают только на вещи, которые присутствовали при загрузке страницы.Поэтому мне пришлось делегировать событие, чтобы элементы, добавленные после факта, могли инициировать события, которые слушал мой jquery, как обсуждалось здесь: https://aiocollective.com/blog/click-doesn-t-work-after-ajax-load-jquery/

Я надеюсь, что эти ссылки будут полезны для кого-то еще!

Answer 2

прослушивание события onbeforeunload.

window.addEventListener("beforeunload", function(event) {
  alert("How dare you leave this page?!");
});