2016-04-08 3 views
1

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

Например, если пользователь нажимает на ссылку, то поле подтверждения с текстом "Вы уверены, что вы хотите закрыть страницу?" при необходимости, но если пользователь нажмет F5, обновите страницу, после чего текст статьи "Вы уверены, что хотите обновить страницу?" ,

Можно ли отличить различные вспомогательные события от onbeforeunload и реагировать на него?

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

ПРИМЕЧАНИЕ: Я перевел текст из приглашения с немецкого на английский, поэтому текст может отличаться.

SIDE ВОПРОС: Почему появляется окно подтверждения дважды, если я нажимаю на ссылку и нажмите «Оставить страницу», если я запускаю этот код на мой локальный веб-сервер, но если я запустить его на StackOverflow?

function ask() 
 
{ 
 
    return "Are you sure?"; 
 
    
 
    //How can i find out what the user actually tried? 
 
    //e.g. did he tried to refresh the page? Or did he tried to close it? 
 
    //PSEUDO CODE: 
 
    // if (user_tried_reload) { alert("RELOAD"); } 
 
    // else if (user_tried_close) { alert ("CLOSE"); } 
 
}
<body onbeforeunload="return ask()"> 
 
    <h1>onbeforeunload Test</h1> 
 
    <a href="http://www.google.de">Google</a> 
 
</body>

ИСПОЛЬЗОВАНИЕ: Нажмите на «Run фрагмент кода», а затем ли нажмите на ссылку или попробуйте обновить страницу.

ответ

1

Причина, по которой код срабатывает дважды, заключается в том, что кнопка «Оставить страницу» повторно запускает событие разгрузки.

То, что я предлагаю вам сделать, это поймать событие F5 и нажатие клавиши сделать свое собственное сообщение:

document.onkeydown = function(evt) { 
    evt = evt || window.event; 
    if (evt.keyCode == 116) { 
     ask('reload'); 
    } 
}; 

В функции спросить(), я бы так что-то вроде этого:

var howmanytimes = 0; 
function ask(action) 
{ 
    howmanytimes++; 

    //PSEUDO CODE: 
    if (howmanytimes == 1) { 
    if (action == 'reload') { alert("RELOAD"); } 
    else { alert ("CLOSE"); } 
    } else { howmanytimes == 0 }; 
} 

Этот код не проверен, и у меня нет доступа к jsfiddle, откуда я, надеюсь, что это указывает на правильное направление (и что я правильно понял вопрос в первую очередь!)

+0

страница может быть обновлена, нажав на T он обновляет значок в браузере, ctrl + r, F5 –

+0

Thx. Но если пользователь нажимает кнопку перезагрузки в браузере, то он по-прежнему распознается как CLOSE – Black

+0

Если вы поймаете F5 (и запомните Ctrl + R), отметьте event.ClientY <0 (нажмите кнопку закрытия), а не просто закрывайте, то вы будете знать, что обновление было нажато. Имеет смысл? – zerohero

Смежные вопросы