Поведение навигации по jQuery на мобильных страницах - PullRequest
Новая
       1

Поведение навигации по jQuery на мобильных страницах

0 голосов
/ 24 июня 2011

У меня очень простой проект .NET MVC3, настроенный с использованием jquery mobile для рендеринга на мобильные устройства.

У меня есть одна страница ... 

www.mydomain.com/landingpage

и на этой странице у меня есть ссылка на другую страницу: 

www.mydomain.com/homepage

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

Однако, попав на домашнюю страницу, все ссылки на домашнюю страницу больше не работают. Домашняя страница содержит около 3 различных jquery мобильных «страниц», и попытка ссылки на них не работает. Это связано с форматом хэша, он все еще показывает что-то похожее на: 

www.mydomain.com/landingpage#homepage

Итак, когда ссылка сгенерирована, она выглядит примерно так: 

www.mydomain.com/landingpage#homepage

Тогда, когда я ссылаюсь на одну из других страниц, похожих на эту: 

a href="#homepage2">Homepage 2</a>

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

www.mydomain.com/landingpage#homepage2

Но я вполне уверен, что это должно выглядеть примерно так: 

www.mydomain.com/homepage#homepage2

Я могу заставить его работать правильно, используя rel = "external" в первой ссылке, но я бы хотел этого избежать, так как он перезагружает страницу и вы теряете анимацию перехода страницы и т. Д.

Любые идеи высоко ценится:)

Ответы [ 5 ]

1 голос
/ 08 ноября 2011

Для тех, кто застрял с такой же проблемой, это исправило для меня:

Я вручную установил атрибут data-url для каждого мобильного элемента jQuery "page" (div с data-роль = "страница").В свою очередь, это привело к обновлению хэша URL страниц при выполнении постбэков.

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

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

Так, например: 

<div data-role="page" id="pageId" data-url="/Page/URL/Here/">

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

1 голос
/ 24 июня 2011

На вашей целевой странице установите rel = "external" в ссылке на домашнюю страницу. Это отключит анимацию, однако навигация ajax на домашней странице будет работать правильно.

0 голосов
/ 14 августа 2012 
<script type="text/javascript">
    $(document).bind("mobileinit",
        function(){ 
            $.extend( $.mobile , { ajaxEnabled: false }); 
        }
    );
</script>

Добавьте этот скрипт на страницу макета (или там, где вы ссылались на скрипты jQuery.

Это должно решить проблему, однако, просто отключил ajax. Это потребует дополнительных исследований, чтобы найтио том, как мы преодолеваем наличие # в URL, при этом оставляя включенным ajax.

0 голосов
/ 31 октября 2011

(Вы, возможно, решили свою проблему, но все же, если ниже помогает)

и у меня все работает нормально.Хотя я также оставил PushStateEnabled в True в заголовке: 

  <script type="text/javascript">
          $(document).bind("mobileinit", function () {

              $.mobile.ajaxEnabled = true;
              $.mobile.pushStateEnabled = true;
          });
        </script>
0 голосов
/ 24 июня 2011

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

И причина, по которой вы получаете это 

www.mydomain.com/landingpage#homepage2

, а не 

www.mydomain.com/homepage#homepage2

это потому, что целевая страница является первой загруженной страницей.все страницы подпоследовательности загружаются в DOM, поэтому jqm предполагает, что он уже находится в DOM, поэтому он пытается загрузить.

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

например,

landingpage.html загружает -> homepage.html

homepage.html загружает -> homepage2.html

...