Когда jQuery Mobile перезагружает страницу при просмотре назад и вперед? - PullRequest
Новая
       1

Когда jQuery Mobile перезагружает страницу при просмотре назад и вперед?

3 голосов
/ 29 февраля 2012

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

По сути, у меня есть две страницы (page1 и page2).page1 имеет ссылку на page2 и наоборот.При первой загрузке обе страницы (i) загружают данные в ajax и (ii) соответственно изменяют структуру DOM.Я использую глобальный var, чтобы избежать перезагрузки данных, который работает довольно хорошо.

Скажем, page1 (соответственно page2) имеет структуру DOM, которая называется dom10 (соответственно dom20) вHTML и dom11 (соответственно dom21) после того, как все загружено.

Вот моя проблема:

  • Я загружаю page1, данные загружаютсяи DOM изменяется с dom10 на dom11

  • Затем я нажимаю <a href="page2">click</a>, page2 загружается, данные извлекаются и DOM изменяется с dom20 до dom21.Пока все хорошо.

  • Затем я нажимаю <a href="page1">click</a>, чтобы вернуться.Страница такая же, как я ее оставил с dom11.Замечательно, не было никакого звонка GET.

  • Я наконец нажимаю <a href="page2">click</a> снова, и вот где это больно.Страница загружается снова (GET вызов), данные не извлекаются, но dom возвращается на dom20

Я могу продолжать нажимать на кнопку вперед и всегдаполучить такое же поведение.Всякий раз, когда я нажимаю page1, я получаю DOM так же, как и оставляю его, всякий раз, когда я нажимаю page2, происходит GET вызов, и DOM перезагружается.

Итак, вот мой вопрос:Есть ли способ предотвратить перезагрузку страницы, которая уже была загружена в jQuery Mobile?

Я могу придумать обходные пути, чтобы мой DOM был таким, каким я хочу, но я бы хотел избежать ненужных вызовов, замедляющих мое приложение.

Если вы хотите поиграть с этим, вы можете попробовать его там .

Большое спасибо за вашу помощь!

PS: Удивительно, я неТакое же поведение на Firefox и Chrome ... Боюсь, это не так просто.

Ответы [ 2 ]

4 голосов
/ 29 февраля 2012

По умолчанию jQM всегда делает AJAX-запрос на страницы, даже если вы уже посещали его ранее.Если вы установите $.mobile.page.prototype.options.domCache = true;, то только jQM не будет перезагружать страницы.

Если это так, вам нужно будет установить значение reloadPage в true при вызове $ .mobile.changePage, если вам нужно обновить страницу - в противном случае страница будет устаревшей.если вы сделаете это, все ваши страницы будут добавлены в DOM, что приведет к массивному DOM, что скажется на производительности - вам нужно будет правильно управлять всем этим в JS, что является другой темой.Но представьте, что вы выполняете открытый поиск $ ('. MyClass'), когда у вас есть 20 страниц в вашей DOM.У меня есть более подробная информация в более старом ответе, который я написал: Jquerymobile - $ .mobile.changepage

1 голос
/ 29 февраля 2012

Вы используете «Макет одной страницы», который загружает каждую страницу с помощью ajax:

Каждая ссылка или форма отсюдавытянет новую страницу через Ajax для поддержки анимированных переходов страниц

Я бы посмотрел на многостраничный макет

Поиск в разделе «Многостраничная структура шаблона».

Ваш пример будет таким: 

<!DOCTYPE html> 
<html> 
 <head>
  <title>test</title>
  <meta charset="utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script src="jquery/jquery-ui-1.8.18.custom.min.js"></script>
    <script>var doNotLoadPage1Again = false; var doNotLoadPage2Again = false;</script>
 </head> 
 <body>
  <div data-role="page" id="page1">
   <p id="info">loading...</p>
   <a href="#page2">page2</a>
   <script>
    if(!doNotLoadPage1Again) {
      // do some heavy loading stuff
      $("#page1 #info").html("loading done");
      doNotLoadPage1Again = true;
    }
    </script>
  </div>
<!-- Page 2-- >
  <div data-role="page" id="page2">
   <p id="info">loading...</p>
   <a href="#page1">page1</a>
   <script>
    if(!doNotLoadPage2Again) {
      // do some heavy loading stuff
      $("#page2 #info").html("loading done");
      doNotLoadPage2Again = true;
    }
    </script>
  </div>
 </body> 
</html>
...