Способ узнать, нажал ли пользователь Отмена в диалоге Javascript перед загрузкой? - PullRequest
Новая
       52

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

32 голосов
/ 10 января 2011

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

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

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

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

Ответы [ 5 ]

48 голосов
/ 10 января 2011

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

$(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 никогда не будет запущен.

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

5 голосов
/ 10 сентября 2014

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

В основном событие 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 здесь

2 голосов
/ 14 января 2011

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

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

function checkunload() {   
  $('body').unbind("mousemove");
  //ADD CODE TO RUN IF CANCEL WAS CLICKED
}
2 голосов
/ 10 января 2011

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

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

...