13,8 тыс подписчиков

Как отследить событие закрытия браузера и вкладки с помощью JavaScript

18 января 202318 янв 2023

435

1 мин

Источник: Nuances of Programming Чтобы отследить событие закрытия браузера и вкладки в JavaScript, выполните следующие действия. window.addEventListener('beforeunload', (event) => {

event.preventDefault();

event.returnValue = '';

}); Обнаружить событие закрытия браузера и вкладки нужно для того, чтобы предупредить пользователя о любых несохраненных изменениях на веб-странице. Использование метода addEventListener() позволит прикрепить обработчик события к любым DOM-объектам, таким как HTML-элементы, HTML-document и window-объект. Событие beforeunload запускается непосредственно перед тем, как window, document и его ресурсы будут выгружены. В этот момент document все еще виден, и событие все еще можно отменить. Необходимо вызвать метод preventDefault() для Event-объекта, который получает обработчик, чтобы отобразить диалоговое окно подтверждения в браузере. Метод preventDefault() предотвращает действие события по умолчанию. Для события beforeunload метод preventDefault() останавлива

event.preventDefault();

event.returnValue = '';

Источник: Nuances of Programming

Чтобы отследить событие закрытия браузера и вкладки в JavaScript, выполните следующие действия.

Добавьте слушатель события beforeunload к глобальному window-объекту.
В этом слушателе вызовите метод preventDefault() для переданного ему Event-объекта.
Установите свойство returnValue этого Event-объекта в пустую строку ('').

window.addEventListener('beforeunload', (event) => {
event.preventDefault();
event.returnValue = '';
});

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

Использование метода addEventListener() позволит прикрепить обработчик события к любым DOM-объектам, таким как HTML-элементы, HTML-document и window-объект.

Событие beforeunload запускается непосредственно перед тем, как window, document и его ресурсы будут выгружены. В этот момент document все еще виден, и событие все еще можно отменить.

Необходимо вызвать метод preventDefault() для Event-объекта, который получает обработчик, чтобы отобразить диалоговое окно подтверждения в браузере. Метод preventDefault() предотвращает действие события по умолчанию. Для события beforeunload метод preventDefault() останавливает выгрузку ресурсов, window и document.

Этот код JavaScript приведет к отображению диалогового окна подтверждения, когда пользователь попытается закрыть браузер или вкладку. Вот пример HTML-кода, написанного с использованием JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Coding Beauty Tutorial</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<a href="codingbeautydev.com">Coding Beauty</a>
<br />
Try to close the tab or browser
<script src="index.js"></script>
</body>
</html>

Обратите внимание, что событие beforeunload срабатывает не только при закрытии браузера или вкладки, но и при нажатии на ссылку, отправке формы, нажатии кнопок назад/вперед и обновлении страницы.