Лучшая практика для предупреждения пользователя о потере данных
У меня есть сайт, который использует много JavaScript (в основном, jQuery), и мне нужен хороший глобальный способ сообщить пользователю, что он потеряет несохраненные изменения при переходе от определенной страницы.
На данный момент у меня есть событие onchange, помещенное на входах, и я обертываю основную навигацию в функцию, которая будет отображать предупреждение при нажатии.
Это кажется действительно неуклюжим и плохо масштабируется (навигация, которая не является частью основная навигация должна быть завернута вручную, что далеко от идеала)
3 ответа
У меня есть событие onchange на моих входах, и я установил isDirty значение true при их изменении.
Затем я использую событие onbeforeunload , чтобы предупредить пользователя о несохраненных изменениях:
var isDirty = false;
window.onbeforeunload = function (evt) {
if (isDirty) {
return 'If you continue your changes will not be saved.';
}
}
Вы ищете событие onbeforeunload .
как
$(window).bind('beforeunload', function(){
return "Are you really sure?";
});
native:
window.onbeforeunload = function(){
return "Are you really sure?";
});
Это, конечно, просто «метод предотвращения». Вам все еще нужна логика, чтобы знать, были ли изменения на вашем сайте. Это можно легко сделать, например, используя логическое значение . Кроме того, вы должны сделать быстрое обнаружение, например
if('onbeforeunload' in window){}
. Я думаю, что все основные браузеры в настоящее время поддерживают это событие, но все еще есть браузеры, которые не знают об этом событии. Поэтому, если вышеуказанное условие не выполняется, вы все равно можете вернуться к другому способу.
Используйте в событии окна при выгрузке , чтобы уловить, когда страница собирается измениться. Затем запросите лайтбокс, чтобы предупредить пользователя, если при переходе все несохраненные данные будут потеряны.