Предлагая пользователю сохранить, когда они покидают страницу

Question

Мне нужно предложить пользователю сохранить свою работу, когда он покидает страницу. Я пробовал перед загрузкой, но мне нужно показать стилизованное приглашение, а не обычное диалоговое окно. Facebook удалось добиться этого (если у вас есть учетная запись Facebook, измените информацию своего профиля и перейдите на другую страницу без сохранения, и вы получите приглашение в стиле). Я также пробовал jquery unload, но, похоже, нет способа остановить распространение события unload.

Answer 1

Внимательно посмотрите на то, что делает Facebook: вы получаете сообщение, если вы щелкаете ссылку на странице , но ничего не делаете при вводе нового URL-адреса в адресной строке, нажатии на закладку или навигации Вернуться в историю вашего браузера.

Если это работает для вас, это достаточно просто сделать: просто добавьте обработчик событий click к каждой ссылке на странице и вызовите на ней свое стилизованное подтверждение. Так как эти обработчики будут вызываться до start любых событий навигации, инициируемых внутри самой страницы, вы можете в значительной степени делать все, что захотите в обработчике - сохранять данные, полностью отменять событие, записывать намеченное пункт назначения и отложить его до тех пор, пока они не подтвердят ...

Однако, если вам нужно или вы хотите отвечать на события навигации, вызванные извне, вам придется использовать onbeforeunload. И да, диалог дерьмовый, и вы не можете отменить мероприятие - это цена, которую мы платим за всех скандальных идиотов, злоупотребляющих такими функциями еще в 90-х годах. К сожалению ...

Answer 2

Выбранный ответ хорош, но мне все еще приходилось копаться в деталях. Если вы хотите использовать событие onbeforeunload, вот пример кода:

<script>
window.onbeforeunload= function() { return "Custom message here"; };
</script>

Answer 3

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

    $('.measurement_value').change(function() {
        $(window).bind('beforeunload', function(){
            return 'You have unsaved changes, are you sure you want to leave?';
        });

        $('#MeasurementAdminEditForm').submit(function(){
            $(window).unbind('beforeunload');
        });
        $('#CancelButton').click(function(){
            $(window).unbind('beforeunload');
        });
    });

В каждом из моих элементов формы я даю класс «measure_value», а затем загружаю beforeunload только в случае изменения одного из этих элементов. Кроме того, я выгружаю предварительную загрузку при отправке моей формы и нажатии кнопки отмены.

надеюсь, это поможет кому-то еще.