Изменить поведение кнопки возврата браузера для моего веб-приложения? - PullRequest
Новая
       17

Изменить поведение кнопки возврата браузера для моего веб-приложения?

6 голосов
/ 20 марта 2012

Я создаю веб-страницу, похожую на приложение.Реальная страница шире, чем область просмотра браузера, в которой переполнение скрыто.Нажатие на разные ссылки изменяет CSS для анимации в разных разделах.Вот очень простая демонстрация: http://smartpeopletalkfast.co.uk/pos/

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

Можно ли этого достичь?Из исследования я не думаю, что можно перехватить и отключить кнопку возврата браузера по умолчанию.

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

Способ, позволяющий добиться чего-то подобного, обычно достигается с помощью приложений на основе AJAX с использованием API истории HTML5.Как я понимаю, вам нужно добавить URL-адреса с фрагментами в историю браузера, например что-то вроде mysite.com # section2.Я не уверен, что это будет работать для меня, однако, поскольку горизонтальная прокрутка не основана на фрагментных ссылках, как вертикальная прокрутка.Может быть, я мог бы использовать JavaScript, чтобы определить, когда URL заканчивается фрагментом вроде # section2, и изменить CSS, чтобы 2-й раздел находился в области просмотра?Я полагаю, что не было бы никакого способа оживить это хотя?

Ответы [ 3 ]

7 голосов
/ 20 марта 2012

Идея изменить собственное поведение кнопки «Назад» в браузере - это, безусловно, красный флаг, сигнализирующий о том, что к чему-то обращаются неправильно, и который в действительности не является кросс-браузерным.

Я бы обработал unload event, чтобы браузер мог плавно переходить между состояниями.

3 голосов
/ 20 марта 2012

Я согласен с Гейбом в том, что попытка изменить поведение кнопки "назад" означает обычно красный флаг;однако после прочтения того, что вы пытаетесь сделать, я не вижу проблемы.(Это может быть терминология - вы на самом деле не пытаетесь изменить поведение кнопки «назад» , вы пытаетесь добавить состояние в историю браузера, чтобы кнопка «Назад» могла перемещаться по ней.)

Вы захотите использовать jQuery BBQ , который управляет состоянием в хэше URL (часть после #).Прослушайте событие hashchange и анимируйте между своими панелями соответственно: 

$(window).on('hashchange', function() {
    var page = $.bbq.getState('page');
    // animate to `page`
});

Теперь вам даже не нужно прикреплять обработчики событий к кнопке следующей страницы - просто свяжите ее: 

<a href="#page=map">Map</a>
1 голос
/ 20 марта 2012

Используйте теги привязки HTML при нажатии кнопки навигации (на вашей странице).Таким образом, прокрутка к месту расположения якоря (вверху, слева).Это приведет к тому, что кнопки браузера «назад» и «вперед» перейдут к якорям.

Возьмем, к примеру, такие:

Код для кнопки: 

<a href="#filters">Filters &lt;</a>
<a href="#map">Map &gt;</a>

Просто измените привязку кнопок «Вперед» и «Назад» на своей странице в соответствии с тем, куда пользователь перемещается.Это заставляет браузер отслеживать, где пользователь находится на вашей странице.

Даже если вы не добавите фактические якорные ссылки для работы хеш-тегов, вы все равно можете использовать свойство javascript window.location.hash для навигации посам пользователь.

...