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

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

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

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

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

29
javascript javascript-events jquery onbeforeunload

5 ответов

вы можете сделать это так:

$(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/

46

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

в основном 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);
    });
});

EDIT: jsfiddle здесь

5

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

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

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

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

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

-6