Мобильные веб-приложения: загрузка страниц

Чтобы использовать эту новую функцию в нашем коде, мы просто меняем все вхождения transition() на changePage() , например:

 changePage("#page-spots", "show"); 

Теперь, когда пользователь перемещается по нашему приложению, история сохраняется. Если они нажимают физическую кнопку «Назад», вы можете увидеть историю страниц в строке URL, но ничего особенного не происходит. Этого и следовало ожидать: мы только что поместили ряд строк в стек истории, но мы не сказали приложению, как вернуться к ним.

Событие window.onPopState вызывается всякий раз, когда происходит событие реальной загрузки страницы или когда пользователь нажимает кнопку Назад или Вперед. Событие получает объект с именем state, который содержит объект состояния, который мы помещаем туда с помощью pushStack() (если состояние не определено, это означает, что событие было pushStack() загрузкой страницы, а не изменением истории, так что это не имеет значения) , Давайте создадим обработчик для этого события:

Пример 4.48. javascripts/ch4/12-hardware-back.js (отрывок)

 window.addEventListener("popstate", function(event) { if(!event.state){ return; } // Transition back - but in reverse. transition( event.state.page, event.state.transition, !event.state.reverse ); }, false); 

Где jQuery?

Для этого примера мы просто использовали стандартный приемник событий DOM, а не метод jQuery bind() . Это только для ясности для события popstate . Если мы связываем его, используя $(window).bind("popstate", ...) , объект события, переданный $(window).bind("popstate", ...) вызову, будет объектом события jQuery, а не родным событием popstate браузера. Обычно это то, что нам нужно, но оболочка событий jQuery не включает в себя свойства из History API, поэтому нам нужно вызвать event.originalEvent чтобы получить событие браузера. В этом нет ничего плохого — вы можете свободно использовать любой подход, который вам кажется наиболее простым.

Фантастический! Кажется, что анимации работают в обратном порядке, когда мы нажимаем кнопку «Назад» в браузере … или они? Если вы посмотрите внимательно, вы можете заметить что-то странное. Иногда мы видим «скользящие» переходы, которые должны быть простыми «показывать» переходы, и наоборот. В чем дело?

На самом деле, здесь у нас возникает ошибка: при движении назад мы не хотим использовать переход страницы, на которую мы переходим, а страницу, с которой мы переходим. К сожалению, это означает, что нам нужно вызвать pushState() при следующем переходе. Но мы не можем видеть будущее … как мы можем знать, какой переход произойдет дальше?

К счастью, History API предоставляет нам другой метод replaceState (). Он почти идентичен pushState (), но вместо добавления в стек он заменяет текущую (самую верхнюю) страницу в стеке. Чтобы решить нашу проблему, мы будем использовать детали предыдущего pushState() ; затем, прежде чем добавить следующий элемент, мы будем использовать replaceState() чтобы обновить страницу с помощью перехода «следующий»:

Пример 4.49. javascripts/ch4/12-hardware-back.js (отрывок)

 var pageState = {}; function changePage(page, type, reverse) { // Store the transition with the state if(pageState.url){ // Update the previous transition to be the NEXT transition pageState.state.transition = type; window.history.replaceState( pageState.state, pageState.title, pageState.url); } // Keep the state details for next time! pageState = { state: { page: page, transition: type, reverse: reverse }, title: "", url: page } window.history.pushState(pageState.state, pageState.title, pageState.url); // Do the real transition transition(page, type, reverse) } 

Мы также должны обновить нашу переменную pageState когда пользователь возвращается; в противном случае он не синхронизировался бы с историей браузера, и наши replaceState() итоге вставили бы поддельные записи в историю:

Пример 4.50. javascripts/ch4/12-hardware-back.js (отрывок)

 window.addEventListener("popstate", function(event) { if(!event.state){ return; } // Transition back - but in reverse. transition( event.state.page, event.state.transition, !event.state.reverse ); pageState = { state: { page: event.state.page, transition: event.state.transition, reverse: event.state.reverse }, title: "", url: event.state.page } }, false); 

Вот и мы. Физическая кнопка Назад теперь работает прекрасно. Но как насчет нашего пользовательского приложения Кнопка «Назад»? Мы можем связать это с тем, чтобы вызвать событие истории, и, следовательно, связать весь этот джаз History API, который мы только что написали, используя быстрый вызов history.back() :

Пример 4.51. javascripts/ch4/12-hardware-back.js (отрывок)

 $(".back").live("click",function(e){ window.history.back(); }); 

Теперь кнопка «Назад» нашего приложения работает точно так же, как браузер или физическая кнопка «Назад». Вы также можете подключить кнопку «Вперед» и вызвать ее с помощью history.forward() или перейти к определенной странице в стеке с помощью history.go(-3) . Возможно, вы заметили, что мы немного потихоньку относились к обработке кнопок «Вперед». Для этого есть две причины: во-первых, в большинстве мобильных браузеров отсутствует кнопка «Вперед», а во-вторых, невозможно узнать, произошло ли событие popstate из-за кнопки «Назад» или «Вперед».

Единственный способ обойти этот рассол — это объединить метод popstate с системой ручного управления историей, которую мы создали в предыдущем разделе, просматривая URL-адреса или другие данные, чтобы определить направление движения стека. Это большая работа для очень небольшого возврата с точки зрения удобства использования, поэтому мы остановимся на истории и функциональности, которые мы создали, и перейдем к следующей задаче.

Сборка мобильной книги

Вы можете приобрести книгу « Создание мобильных веб-сайтов и приложений для интеллектуальных устройств » в Sitepoint. Прочитайте всю главу 4. Мобильные веб-приложения , бесплатно здесь, в BuildMobile, бесплатно в следующих разделах.

• Настройка магазина
• События
• Быстрые победы
• Загрузка страниц
• Ajax
• шаблонирование
• У нас есть приложение!