Отлавливаем событие закрытия или ухода со странички

2010-07-05

JavaScript позволяет предотвратить закрытие странички, если нам это нужно. Мы можем проверить завершена ли работа сценария, можем сообщить серверу, что пользователь закрыл страничку, если есть такая необходимость. Но, на мой взгляд, самая главная возможность — это то, что мы можем отследить все ли данные пользователя сохранены, и проинформировать его о потенциальной утере данных.

Реализуется это благодаря стандартному методу браузеров — onbeforeunload.

Пример использования:

window.onbeforeunload = function (e) {
// Ловим событие для Interner Explorer
var e = e || window.event;
var myMessage= "Вы действительно хотите покинуть страницу, не сохранив данные?";
// Для Internet Explorer и Firefox
if (e) {
e.returnValue = myMessage;
}
// Для Safari и Chrome
return myMessage;
};

Более практический пример:
Допустим у нас есть флаговая переменная is_data_changed, которая содержит значение «true» если некоторые данные были изменены, но не сохранены, и значение «false» — в противном случае.
Таким образом можно написать такой фрагмент кода, который будет предотвращать утерю данных пользователя:

window.onbeforeunload = function () {
return (is_data_changed ? "Измененные данные не сохранены. Закрыть страницу?" : null);
}

Этот пример отработает во всех браузерах, поддерживающих данное событие (К примеру: Internet Explorer, Firefox, Safari, Chrome).
Обратите внимание, что предупреждение о закрытии страницы появится только в том случае, если функция вернет не null.

Примечание: на данный момент этот метод не реализован в браузере Opera.



8 комментариев на «Отлавливаем событие закрытия или ухода со странички»

  1. avianame:

    Спасибо за инфу!

  2. master_xss:

    можно просто на повесить событие onUnLoad

  3. master_xss:

    Уважаемый Админ,почему вырезаются все тэги из теста сообщения?Если ваш сайт написан на php, то не проще ли будет пропустить текст через htmlspecialchars() , чем резать все подряд.

  4. admin:

    С замечанием полностью согласен.
    Попытаемся исправить данную проблему.
    Спасибо

  5. 123:

    весьма полезная инфа)

  6. 123:

    Господин Администратор. Неплохо было бы реализовать отправку сообщения без перезагрузки страницы. просто с перезагрузкой это не совсем корректно (все таки сейчас 21 век). Как вы с считаете?

  7. admin:

    @123: Полностью с Вами согласен. Проблема только во времени. Сейчас для блога используется обычный WordPress.
    Ну либо эта возможность появится в нём, либо нужно искать какой-то плагин, либо написать самому… )

  8. Semyon:

    Hello from 2021 year :)

Добавить комментарий