Вопрос по mobile, javascript – Как реализовать свой собственный стек истории в одностраничном мобильном веб-приложении?

22

У меня есть одностраничное мобильное приложение, разработанное с использованием Backbone и Zepto.

Он работает правильно с кнопками назад / вперед в браузере.

Когда пользователь переходит на страницу,new содержание скользит справа какold содержимое смещается влево (и из области просмотра). Я хочу, чтобы то же самое происходило, если пользователь нажимает кнопку & quot; forward & quot; кнопка браузера. Это все работает.

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

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

Как лучше всего реализовать свой собственный стек истории, чтобы я мог определить, перемещается ли пользователь вперед / назад в контексте одностраничного мобильного приложения Backbone?

Просто чтобы уточнить: вы используете магистральную маршрутизацию для навигации между страницами? У ваших страниц есть присущий порядок (переход от страницы B к странице A всегда «назад») или это просто порядок, в котором вы просматриваете элементы? OlliM
@OlliM У меня есть маршрутизатор Backbone, но я не обязательно звонюrouter.navigate() однако для каждого изменения у меня есть пользовательское событие, которое запускается при изменении каждой страницы. Также нет определенного порядка страниц. alex
Хорошо, проблема, с которой я столкнулся, была связана, но не та же самая: у меня есть кнопки в пользовательском интерфейсе, которые действуют как назад, и хотелось, чтобы история браузера отражала это. Я получил частичное решение этого вопроса: я веду учет страниц, которые были добавлены в стек истории, и вместо router.navigate проверяю, находится ли страница уже в стеке, и использую history.go вместо навигации, если она & apos; s уже есть, router.navigate, если нет. Работает в обычном случае, но если пользователь перезагружает страницу в середине приложения, состояние теряется. OlliM

Ваш Ответ

5   ответов
1

true одностраничное приложение, почему бы вам не настроить массив для хранения URL-адресов истории в переменной js (вместо того, чтобы полагаться на что-то вродеhistory.pushState и его поддержка)?

Всякий раз, когда к новой странице переходят, вы можете вставить ее URL в массив, когда & quot; назад & quot; Кнопка нажата, вы можете получить нужный URL-адрес, как вы хотите. Это будет прекрасно работать до тех пор, пока вы правильно отбрасываете URL-адреса, когда пользователь вернется на несколько шагов назад и затем перейдет кnew ссылка на сайт.

Я никогда не пытался реализовать это, чтобы использовать его для истории страниц, но это прекрасно работало для логики отмены-возврата на странице.

Update:

После дальнейших исследований вышеуказанный подход не будет работать для перезагрузки страницы, поскольку это будет действие, происходящее вне обработки истории, доступной через JS. Он по-прежнему будет работать для отслеживания переходов назад / вперед, но такая история будет потеряна при переходе к URL-адресу, внешнему по отношению к приложению, или обновлению страницы. Ответ Дэвида Малдера, по-видимому, лишен этого ограничения, полагаясь на историю уровня браузера, которая сохраняется за пределами области страницы.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded alex
0

это позволит вести историю и переместит пользователя назад.

function onBackKeyDown() {
    history.go(-1);
    navigator.app.backHistory();
}
1

одной страницей - несколько просмотров.

Первоначально я использовал html5 statechange и onhashchange. Все это имеет некоторые проблемы в том или ином мобильном устройстве. Наконец я использовал плагин истории Zepto отсюдаhttps://github.com/browserstate/history.js

Это несколько решило большинство вопросов. Попробуйте, это будет полезно, он обрабатывает функции html4 и html5 везде, где это возможно.

Error: User Rate Limit Exceeded alex
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededzipError: User Rate Limit Exceeded alex
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
-2

которая опирается только на изменения хеша) - это идеальный, самый простой, наиболее совместимый с браузером подход к отслеживанию истории. Там история вообще не отслеживается, поскольку Сэмми просто следит за хэш-обменом.

Опираясь на & quot; # / slide / 123 & quot; позволяет поддерживать жесткие перезагрузки страниц и упрощает работу

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

Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededhashchangeError: User Rate Limit Exceeded alex
Error: User Rate Limit ExceedednotError: User Rate Limit ExceededpushStateError: User Rate Limit Exceeded#page/nameOfPage/numberDescribingPositionError: User Rate Limit ExceedednumberDescribingPositionError: User Rate Limit Exceeded
Error: User Rate Limit ExceededentireError: User Rate Limit Exceeded
Error: User Rate Limit ExceededdoError: User Rate Limit Exceeded
22

1, но я помог разработать мобильное приложение, которое должно было реализовать именно это поведение в html5, поэтому я должен быть в состоянии дать несколько полезных советов:

Прежде всего, хорошо знать, чтоhistory.pushState функция существует. Хотя большая проблема в том, чтоэто поддерживается до Android 2.3, но не на Android 3 до Android 4.0.3, Как правильно указывает Киранвдж, это можно решить с помощью популярныхhistory.js библиотека, которая обеспечивает решение polyfill из-за отсутствия функциональности истории.

Теперь, когда я решил вашу проблему, я реализовал анимацию направления истории, добавив данные вpushState функция (history.pushState(data,title,url) ) с помощью которого я определил логическую позицию страницы. В моем приложении я не ограничивался только горизонтальной полосой, но в вашем случае вы бы отслеживали положение, в котором любая новая загруженная страница получает позицию, которая на одну позицию выше вашей текущей страницы. Например.

History.pushState({position:History.getState().data.position+1},"Your title","Your URL");

Далее, когдаwindow.onstatechange или жеwindow.onanchorchange событие вызывает, вы наблюдаете, является ли позиция выше или ниже, чем ваша текущая страница (например, с помощьюhistory.js History.getState() функции, которую я использовал выше), и в зависимости от этого вы решаете, в каком направлении двигаться (ниже слева и выше справа), как показано на рисунке ниже:

Illustration of history events

Вы также заметите, что я уже предположил на первой странице, что у вас есть{position:1}тогда как обычно на первой странице не будет информации о состоянии. Как это может быть достигнуто с помощьюhistory.replaceState который заменяет текущее пустое состояние на более информативное состояние. В качестве альтернативы вы можете также проверить наличие пустого состояния в любом из ранее упомянутых событий, и если оно пустое, вы предполагаете, что оно является самым левым ({position:1}).

Надеюсь, это поможет, и если у вас есть какие-либо дополнительные вопросы, не стесняйтесь задавать.

Обратите внимание, что этот ответ предполагает, что вы используетеhistory.js и вам нужно было бы слушать немного разные события (такие какonpopstate) и использовать немного разные структуры (history скорее, чемHistory) если вы хотите построить собственное решение.

Также полезно отметить, что это можно создать с помощью собственного массива очередей, который дает вам гораздо больший контроль, но не будет работать в сочетании с кнопкой «Назад» браузера. Это большая проблема с браузерными сайтами, но намного проще, если вы создаетеCordova (А.к.а.PhoneGap) веб приложение.

1 Just read about it and it appears to do some history handling своего собственного, которыйmight усложнить интеграцию описанной выше техники.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededpageError: User Rate Limit Exceeded

Похожие вопросы