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

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

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

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

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

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

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

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

правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	12	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	—

Підтримка: серверні переглядачі

Переглядач
	1.27

Приклади

+ запропонувати свій приклад у пісочниці

<form>
    <label>Ім'я: <input type="text" name="name"></label>
    <button type="submit">Надіслати</button>
</form>

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 = '';
  }
});

<div id="editor">Демонстраційний елемент</div>

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; // Для сучасних браузерів
  }
});