Лучшая практика для предупреждения пользователя, что они потеряют данные

Question

У меня есть сайт, который использует много JavaScript (в основном, jQuery), и мне нужен хороший глобальный способ сообщить пользователю, что он потеряет несохраненные изменения при переходе с определенной страницы.

На данный момент у меня есть событие onchange, помещенное на входах, и я обертываю основную навигацию в функцию, которая отображает предупреждение при нажатии.

Это выглядит очень неуклюже и плохо масштабируется (навигация, которая не является частьюосновной навигации нужно завернуть вручную, что далеко от идеала)

Answer 1

У меня есть событие onchange на моих входах и для переменной isDirty устанавливается значение true, когда они меняются.

Затем я использую событие onbeforeunload, чтобы предупредить пользователя о несохраненных изменениях:

var isDirty = false;

window.onbeforeunload = function (evt) {
    if (isDirty) {
        return 'If you continue your changes will not be saved.';
    }
}

Answer 2

Вы ищете событие onbeforeunload.

как

$(window).bind('beforeunload', function(){
    return "Are you really sure?";
});

родной

window.onbeforeunload = function(){
   return "Are you really sure?";
});

Это, конечно, просто "метод предотвращения". Вам все еще нужна логика, чтобы узнать, были ли изменения на вашем сайте. Это легко сделать, например, используя boolean. Кроме того, вы должны сделать быстрое обнаружение, как

 if('onbeforeunload' in window){}

Я думаю, что все основные браузеры поддерживают это событие в настоящее время, но есть еще браузеры, которые не знают об этом событии. Поэтому, если вышеприведенное условие не выполнено, вы все равно можете изящно отступить на другой путь.

Answer 3

Используйте в событии окна on unload, чтобы поймать, когда страница изменится. Затем выведите предупреждение в виде лайтбокса, чтобы предупредить пользователя о том, что при удалении несохраненных данных будут потеряны.