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

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

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

    $('.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 при отправке своей формы и нажатием кнопки отмены.

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