Способ узнать, нажал ли пользователь кнопку Отмена в диалоговом окне Javascript onbeforeunload?

Question

Способ узнать, нажал ли пользователь кнопку Отмена в диалоговом окне Javascript onbeforeunload?

Я открываю диалоговое окно, когда кто-то пытается перейти с определенной страницы, не сохранив свою работу. Я использую событие onbeforeunload Javascript, отлично работает.

Теперь я хочу запустить некоторый код Javascript, когда пользователь нажимает "отмена" в появившемся диалоговом окне (говоря, что они не хотят уходить со страницы).

Возможно ли это? Я также использую jQuery, так что, возможно, есть событие, подобное beforeunloadcancel, которое я могу связать куда?

обновление: идея состоит в том, чтобы фактически сохранить и направить пользователей на другую веб-страницу, если они выбрали cancel

665 5

jQuery javascript javascript-events onbeforeunload

5 ответов:

Comments

Ничего не найдено.

jAndy · Accepted Answer · 2011-01-10 22:15:22

Вы можете сделать это так:
$(function() {
    $(window).bind('beforeunload', function() {
        setTimeout(function() {
            setTimeout(function() {
                $(document.body).css('background-color', 'red');
            }, 1000);
        },1);
        return 'are you sure';
    });
}); 
Код в первом методе setTimeout имеет задержку 1 мс. это просто для добавления функции в UI queue. Поскольку setTimeout выполняется асинхронно, интерпретатор Javascript будет продолжать напрямую вызывать оператор return, который, в свою очередь, запускает браузеры modal dialog. Это заблокирует UI queue и код из первого setTimeout не будет выполнен, пока модальный не будет закрыт. Если пользователь нажал кнопку cancel, это вызовет другой setTimeout, который срабатывает в около одной секунды. Если пользователь подтвердил с помощью ok, пользователь перенаправит и второй setTimeout никогда не будет запущен.

Пример: http://www.jsfiddle.net/NdyGJ/2/

99 Problems - Syntax ain't one · Accepted Answer · 2015-08-18 13:12:12

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

В основном событие unload запускается после события beforeunload. Мы можем использовать это, чтобы отменить тайм-аут, созданный в событии beforeunload, изменив ответ дженди:
$(function() {
    var beforeUnloadTimeout = 0 ;
    $(window).bind('beforeunload', function()  {
        console.log('beforeunload');
        beforeUnloadTimeout = setTimeout(function() {
            console.log('settimeout function');
            $(document.body).css('background-color', 'red');
        },500);
        return 'are you sure';
    });
    $(window).bind('unload', function() {
        console.log('unload');
        if(typeof beforeUnloadTimeout !=='undefined' && beforeUnloadTimeout != 0)
            clearTimeout(beforeUnloadTimeout);
    });
}); 
Править: jsfiddle здесь

Barlow Tucker · Accepted Answer · 2011-01-14 02:19:15

Я не думал, что это возможно, но просто попробовал эту идею, и она работает (хотя это какой-то Хак и не может работать одинаково во всех браузерах):
window.onbeforeunload = function () {   
  $('body').mousemove(checkunload);
  return "Sure thing"; 
};

function checkunload() {   
  $('body').unbind("mousemove");
  //ADD CODE TO RUN IF CANCEL WAS CLICKED
}

Juan Mendes · Accepted Answer · 2011-01-10 21:45:45

Невозможно. Может быть, кто-нибудь докажет, что я ошибаюсь... Какой код вы хотите запустить? Вы хотите, чтобы автоматическое сохранение при нажатии кнопки Отмена? Это звучит нелогично. Если вы еще не автосохранение, я думаю, что имеет мало смысла автосохранение, когда они нажмут "отмена". Может быть, вы могли бы выделить кнопку Сохранить в вашем обработчике onbeforeunload, чтобы пользователь видел, что ему нужно сделать, прежде чем перейти.

jyoti · Accepted Answer · 2014-11-26 14:19:41

window.onbeforeunload  = function() {
    if (confirm('Do you want to navigate away from this page?')) {
        alert('Saving work...(OK clicked)')
    } else {
        alert('Saving work...(canceled clicked)')
        return false
    }
 }
С этим кодом также, если пользователь нажимает на кнопку "Отмена" в IE8 появится диалоговое окно навигации по умолчанию.