JS властивість Event.beforeunload

Загальний опис

beforeunload — це подія, яка виникає у веб-браузері безпосередньо перед тим, як користувач залишає сторінку або закриває вкладку браузера. Ця подія дозволяє веб-розробникам запобігти випадковій втраті даних, надавши користувачу попередження про незбережені зміни. Наприклад, якщо користувач заповнив форму, але ще не надіслав її, подія beforeunload може використовуватися для відображення попередження, що запитує користувача про бажання залишити сторінку.

Для використання події beforeunload слід додати обробник подій до об'єкта window. Обробник подій повинен містити код, який виконується перед тим, як сторінка буде закрита або перезавантажена. Найчастіше розробники використовують текстове повідомлення для попередження користувача про потенційну втрату даних. Проте, в сучасних браузерах текст попередження налаштовується браузером, а не JavaScript-кодом. Наприклад:

window.addEventListener('beforeunload', function(event) {
  event.preventDefault();
  event.returnValue = ''; // Додаємо returnValue для сумісності зі старими браузерами
});

У цьому прикладі, коли користувач намагається залишити сторінку, браузер відображає стандартне попередження, що запитує, чи дійсно користувач хоче залишити сторінку.

Використання події beforeunload дозволяє попередити користувача перед тим, як він покине сторінку, що корисно для уникнення втрати незбережених даних або завершення важливих дій. Ця подія часто застосовується в додатках, де користувачі вводять велику кількість інформації або виконують складні дії, які можуть бути втрачені при випадковому закритті сторінки.

Важливо зазначити, що подія beforeunload повинна використовуватися обережно, оскільки надмірне використання може викликати роздратування у користувачів, особливо якщо вони постійно отримують попередження, навіть коли немає важливих даних, які потрібно зберегти. У сучасних браузерах текст попередження не може бути змінений або налаштований через JavaScript, що обмежує можливості розробників у персоналізації цього досвіду.

Порада:	Переконайтеся, що обробник подій `beforeunload` встановлюється лише у тих випадках, коли є незбережені зміни. Це можна зробити, наприклад, через прапорець або змінну, що перевіряється перед додаванням обробника подій. Таким чином, ви зможете попередити користувача лише тоді, коли це дійсно необхідно.
Порада:	Не використовуйте подію `beforeunload` для збору аналітичних даних або виконання інших серверних запитів, оскільки багато браузерів можуть ігнорувати такі дії, щоб забезпечити швидкий вихід із сторінки. Для таких цілей краще використовувати інші події, такі як `unload` або `pagehide`.
Порада:	Подія `beforeunload` може не спрацювати, якщо користувач залишає сторінку занадто швидко або браузер аварійно завершує роботу. Тому не покладайтеся тільки на цю подію для збереження важливих даних; краще зберігати критично важливу інформацію автоматично або пропонувати користувачам зберегти зміни в інших формах.

Синтаксис

window.addEventListener('beforeunload', function(event) {
  // Ваш код тут
});

Значення

Return

Переглядачі

Переглядач
	66	57	11.1	53	16

Переглядач
	66	66	57	11.3

Переглядач
	15.0.0	1.0

У цьому прикладі, якщо користувач вносить зміни у форму і не зберігає їх, перед закриттям сторінки або перезавантаженням з'являється попередження. Це дозволяє уникнути випадкової втрати даних.

let isFormModified = false;

const form = document.querySelector('form');
form.addEventListener('input', function() {
  isFormModified = true; // Встановлюємо прапорець, коли форма змінена
});

window.addEventListener('beforeunload', function(event) {
  if (isFormModified) {
    event.preventDefault();
    event.returnValue = '';
  }
});

Цей приклад демонструє, як використовувати подію beforeunload для попередження користувача про незбережені зміни в текстовому редакторі. Якщо користувач намагається покинути сторінку з незбереженими змінами, йому пропонується підтвердження, щоб запобігти випадковій втраті даних.

let hasUnsavedChanges = false;

document.getElementById('editor').addEventListener('input', function() {
  hasUnsavedChanges = true; // Встановлюємо прапорець, коли є незбережені зміни
});

window.addEventListener('beforeunload', function(event) {
  if (hasUnsavedChanges) {
    const confirmationMessage = 'Ви маєте незбережені зміни. Ви дійсно хочете вийти?';
    event.returnValue = confirmationMessage; // Для старих браузерів
    return confirmationMessage; // Для сучасних браузерів
  }
});

JS довідник

JavaScript

Наповнення JS розділу