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, оскільки браузери можуть закрити сторінку до того, як такі операції завершаться. Для завершення цих операцій краще використовувати швидкі і короткі запити або оптимізовані методи.

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

Порада

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

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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

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