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

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

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

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

ОБНОВЛЕНИЕ. Идея состоит в том, чтобы фактически сохранить и направить пользователей на другую веб-страницу, если они выбрали отмену

Ответ 1

Вы можете сделать это следующим образом:

$(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 не будет выполнен, пока модальный не будет закрыт. Если пользователь нажал кнопку "Отмена", он запустит другой setTimeout, который срабатывает примерно через одну секунду. Если пользователь подтвердил с помощью ok, пользователь будет перенаправлен, а второй setTimeout никогда не будет запущен.

example: http://www.jsfiddle.net/NdyGJ/2/

Ответ 2

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

В основном событие unload запускается после события beforeunload. Мы можем использовать это, чтобы отменить тайм-аут, созданный в событии beforeunload, изменяя ответ jAndy:

$(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);
    });
});

EDIT: jsfiddle here

Ответ 3

Я не думал, что это возможно, но просто попробовал эту идею, и она работает (хотя это хак и может не работать одинаково во всех браузерах):

window.onbeforeunload = function () {   
  $('body').mousemove(checkunload);
  return "Sure thing"; 
};

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

Ответ 4

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

Ответ 5

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, появится диалоговое окно навигации по умолчанию.