Захват результата окна подтверждения window.onbeforeunload - PullRequest
Новая
       47

Захват результата окна подтверждения window.onbeforeunload

12 голосов
/ 23 марта 2011

Есть ли способ получить результат в диалоговом окне подтверждения window.onbeforeunload, как показано ниже, из переполнения стека (это происходит, когда вы покидаете страницу «Задать вопрос», не оставив вопрос)?

Вот как это выглядит в Chrome, я думаю, что это немного отличается в других браузерах, но у вас всегда есть некоторая форма кнопок да / нет.

window.onbeforeunload confirmation dialog

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

Я реализовал это, как показано ниже: 

// concept taken from SO implementation
function setConfirmUnload(showMessage, message) {
    window.onbeforeunload = showMessage ? (message ? message : "this is a default message") : null;
}

// pseudo code
listen to changes on inputs
if any inputs fire a change event
   call setConfirmUnload(true, 'My warning message')

note Я использую jQuery на своем сайте.

По сути, я пытаюсь реализовать Gmail-подобную реализацию, в которой, если пользователь оставляет страницу с формой, в которую он внес изменения, не сохраняя, он нагревается с помощью аналогичного диалога. Если они решат отменить изменения и покинуть страницу, мне нужно очистить некоторые временные записи из базы данных (я думаю, вызов AJAX или просто отправить форму с флагом delete), а затем отправить их на их путь.

Мой вопрос также относится к:

jQuery AJAX вызывает в обработчике onunload ПОСЛЕ ПОЛУЧЕНИЯ страницы при обновлении вручную. Как я гарантирую, что первая загрузка произойдет?

Ответы [ 3 ]

6 голосов
/ 05 июня 2013

Как насчет этого: 

$( window ).bind( 'beforeunload' , function( event ) {
    setTimeout( function() {
        alert( 'Hi againe!' );
    } );
    return '';
} ).bind( 'unload', function( event ) {
    alert( 'Goodby!' );
} );
4 голосов
/ 23 марта 2011

Вы можете получить подтверждение выхода, используя window.onbeforeunload , но нет способа узнать, на какую кнопку нажал пользователь.

Чтобы процитировать предыдущий ответ от jvenema из этой цепочки :

Основная цель beforeunload - например, позволить пользователям сохранять изменения до того, как их изменения будут потеряны.

Кроме того,если ваши пользователи уходят, уже слишком поздно [...]

0 голосов
/ 04 сентября 2018

Поздно к вечеринке, но я обнаружил, что следующий код (в TypeScript) является приличным способом определить, нажал ли человек «ОК» в этом диалоговом окне подтверждения.

public listenToUnloadEvents(): void {

  window.addEventListener('beforeunload', (e) => {
    const confirmationMessage = '\o/';

    (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
    return confirmationMessage;                                // Webkit, Safari, Chrome etc.
  });

  window.addEventListener('unload', () => {

    this.sendNotification(Action.LEFT)
  });
}

Я не уверен, сколько времени вам нужно для запуска кода в событии unload, но в этом случае я отправляю уведомление через Socket.io, поэтому он очень быстро завершается,

Что касается обнаружения отмены в этом уведомлении, как кто-то еще упомянул, создание глобальной переменной, такой как let didEnterBeforeUnload = false, может быть установлено в true, когда происходит событие beforeunload.После этого, создав третье событие, например, (опять же, в TypeScript), вы можете сделать вывод, что пользователь нажимает отменить 

window.addEventListener('focus', (e) => {

  if (didEnterBeforeUnload) {
    console.log('pressed cancel')
  }

  didEnterBeforeUnload = false
});

. Как примечание, эти события не сработают (iirc)если вы не взаимодействовали со страницей.Поэтому обязательно нажимайте или нажимайте на страницу, прежде чем пытаться уйти во время тестирования.

Надеюсь, это поможет кому-то еще!

...