Атрибут onbeforeunload тега <body>

Описание

Атрибут onbeforeunload позволяет задать JavaScript-код, который выполняется перед тем, как пользователь покинет страницу (перейдёт по ссылке, закроет вкладку, обновит страницу и т.д.). Это событие часто используется для предотвращения потери несохранённых данных.

Пример использования:
<body onbeforeunload="return checkUnsavedChanges()"> <form id="myForm"> <!-- Поля формы --> </form> <script> function checkUnsavedChanges() { if (formHasChanges()) { return 'У вас есть несохранённые изменения. Вы действительно хотите покинуть страницу?'; } } </script> </body>

Особенности работы:

Браузер Поведение
Chrome, Firefox, Edge Показывает стандартное сообщение, игнорируя кастомный текст
Safari Может показывать кастомный текст сообщения
Мобильные браузеры Часто ограничивают или блокируют это событие

Рекомендации по использованию:

  • Используйте только для действительно важных предупреждений
  • Не злоупотребляйте - это может раздражать пользователей
  • Сохраняйте данные автоматически вместо блокировки перехода
  • Для форм используйте более специфичные события (onchange, onsubmit)
  • Тестируйте поведение в разных браузерах

Современный подход:

<script> // Лучшая практика - использовать addEventListener window.addEventListener('beforeunload', function(e) { if (formHasChanges()) { e.preventDefault(); e.returnValue = ''; // Требуется для совместимости return ''; // Современные браузеры игнорируют текст } }); </script>

Важные замечания:

  • Современные браузеры показывают стандартное сообщение
  • Событие может не сработать при аварийном закрытии браузера
  • Некоторые расширения могут блокировать это событие
  • Не работает в режиме инкогнито/приватного просмотра
  • Может влиять на производительность страницы

Альтернативные решения:

<script> // 1. Автосохранение данных setInterval(autoSave, 30000); // 2. Подтверждение при переходе по внутренним ссылкам document.querySelectorAll('a').forEach(link => { link.addEventListener('click', confirmNavigation); }); // 3. Модальное окно при попытке ухода function showExitModal() { // Показать красивое модальное окно } </script>

Примечание: Современные веб-стандарты отходят от использования onbeforeunload в пользу более пользовательских решений. Рассмотрите возможность реализации автосохранения или кастомных модальных окон для лучшего UX.