Вопрос по onunload, window.onunload, javascript, javascript-events, jquery – Я надеюсь, что это помогает кому-то еще там!

12

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

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

Предположительно, если они все еще находятся на странице обидчика после того, как событие было инициировано, они решили остаться, и вы, вероятно, могли бы выяснить это, наблюдая за последовательностью 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')

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

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

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

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

Ваш Ответ

3   ответа
6

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

$( window ).bind( 'beforeunload' , function( event ) {
    setTimeout( function() {
        alert( 'Hi againe!' );
    } );
    return '';
} ).bind( 'unload', function( event ) {
    alert( 'Goodby!' );
} );
Это на самом деле не мешает ... даже на локальном хосте в большинстве случаев требуется более одного тика междуbeforeunload а такжеunload, Даже медленная задержка в 500 мс может быть слишком короткой. Sjeiti
3

window.onbeforeunload но нет способа узнать, на какую кнопку нажал пользователь.

Цитировать предыдущий ответ отJvenema из этой темы:

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

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

Трюк window.onfocus у меня не работал в Firefox и Chrome (только в IE), но я обнаружил, что использование setTimeout в обработчике beforeunload (для вызова запуска некоторого кода, если пользователь решил остаться на странице) работает. Вы можете увидеть рабочий пример здесь:jsfiddle.net/nathanbedford/uscobrm0/10 Nathan Bedford
Чтобы проверить, что пользователь нажал: я нашел успешное решение, используяwindow.onfocus(), Эта функция будет срабатывать, когда пользователь нажимает кнопку STAY, и возвращается на страницу. Тем не менее, обратите внимание, что onfocus () также будет запускаться при смене вкладок, окон и т. Д. Установите глобальную переменную в onbeforeunload (), чтобы иметь возможность проверять / захватывать информацию о том, куда приходит пользователь. Если пользователь хочет покинуть страницу, вы можете сделать некоторые последние вещи вwindow.onunload() GDmac
0

но я обнаружил, что следующий код (в 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) срабатывать, если вы не взаимодействовали со страницей. Поэтому обязательно нажимайте или нажимайте на страницу, прежде чем пытаться уйти во время тестирования.

Я надеюсь, что это помогает кому-то еще там!

Похожие вопросы