В этом руководстве вы узнаете о событии JavaScript beforeunload, которое позволяет отображать диалоговое окно подтверждения перед тем, как выгрузить и покинуть веб-страницу.
Прежде чем веб-страница и ее ресурсы будут выгружены, запускается событие beforeunload. В это время веб-страница все еще видна, и у вас есть возможность отменить мероприятие.
Чтобы зарегистрироваться на событие beforeunload, вы используете метод window.addEventListener() :
window.addEventListener('beforeunload',(event) =>{
// do something here
});Поскольку window является глобальным объектом, его можно опустить следующим образом:
addEventListener('beforeunload',(event) =>{
// do something here
});Если на веб-странице есть прослушиватель событий beforeunload, и вы собираетесь покинуть страницу, событие beforeunload вызовет диалоговое окно подтверждения, чтобы подтвердить, действительно ли вы хотите покинуть страницу.
Если вы подтвердите, браузер перенаправит вас на новую страницу. В противном случае он отменит навигацию.
В соответствии со спецификацией вам необходимо вызвать метод preventDefault() внутри обработчика событий beforeunload, чтобы отобразить диалоговое окно подтверждения. Однако не все браузеры реализуют это:
addEventListener('beforeunload',(event) => {
event.preventDefault();
});Исторически сложилось так, что некоторые браузеры позволяют отображать собственное сообщение в диалоговом окне подтверждения. Это было предназначено для информирования пользователей о том, что они потеряют данные, если уйдут. К сожалению, эта функция часто используется для обмана пользователей. В результате пользовательское сообщение больше не поддерживается.
В соответствии со спецификацией HTML вызовы alert(), confirm() и prompt() игнорируются в обработчике событий beforeunload.
Пример
В следующем примере к событию beforeunload присоединяется обработчик событий. Если щелкнуть ссылку для перехода на другую страницу, браузер отобразит диалоговое окно подтверждения.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS beforeunload Event</title>
</head>
<body>
<a href="https://www.javascripttutorial.net/">JavaScript Tutorial</a>
<script>
window.addEventListener('beforeunload',(event) => {
event.preventDefault();
// Google Chrome requires returnValue to be set.
event.returnValue = '';
});
</script>
</body>
</html>Заключение
- Событие
beforeunloadзапускается перед выгрузкой веб-страницы и ее ресурсов. - Используйте
beforeunload, чтобы подтвердить, действительно ли пользователи хотят покинуть страницу, чтобы предотвратить потерю данных.