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

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

Подія unload виникає, коли користувач залишає вебсторінку, наприклад, при закритті вкладки або переході на іншу сторінку. Ця подія дозволяє виконувати дії перед тим, як сторінка буде повністю вивантажена з пам'яті браузера. Це може бути корисним для очищення ресурсів, збереження стану або відправки останніх запитів на сервер.

У JavaScript подію unload можна обробляти за допомогою методу addEventListener, як показано нижче:

window.addEventListener('unload', function() {
  console.log('Користувач залишає сторінку.');
});

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

window.addEventListener('unload', function() {
  navigator.sendBeacon('/log', JSON.stringify({ action: 'leave' }));
});

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

Подія unload також може бути корисною для звільнення ресурсів, як-от зупинка аудіо- або відео-відтворення, знищення вебсокет-з'єднань або очищення тимчасових даних:

window.addEventListener('unload', function() {
  videoElement.pause();  // Зупинка відео
});

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

Порада:	Слід бути обережним із складними обчисленнями або тривалими асинхронними операціями під час події `unload`, оскільки браузери можуть закрити сторінку до того, як такі операції завершаться. Для завершення цих операцій краще використовувати швидкі і короткі запити або оптимізовані методи.
Порада:	Якщо сторінка взаємодіє з API, такими як вебсокети, закриття цих з'єднань на етапі `unload` є хорошою практикою для звільнення ресурсів. Це особливо важливо для уникнення "завислих" з'єднань, які можуть продовжувати споживати ресурси на сервері або клієнті.
Порада:	Використання `unload` для зупинки мультимедійного контенту (аудіо, відео) або ігрових двигунів є гарним способом зберегти продуктивність. Це зупинить відтворення або обробку фреймів перед тим, як користувач залишить сторінку, що може бути корисним для інтерактивних веб-додатків.

Синтаксис

window.addEventListener('unload', function(event) {
  // Дії перед закриттям сторінки
});

Значення

Return

Переглядачі

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

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

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

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

let socket = new WebSocket('wss://example.com/socket');

window.addEventListener('unload', function() {
  socket.close();
});

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

window.addEventListener('unload', function() {
  navigator.sendBeacon('/track-exit', JSON.stringify({ userId: 123, event: 'exit' }));
});

JS довідник

JavaScript

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