jQuery Mobile: разрывы при перезагрузке / добавление глубоких ссылок / закладок в DOM через AJAX - PullRequest
Новая
       26

jQuery Mobile: разрывы при перезагрузке / добавление глубоких ссылок / закладок в DOM через AJAX

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

Я создаю мобильный сайт с помощью jQuery Mobile, и один из моих тестеров указал на проблему при повторной загрузке, глубоких ссылках или закладках любых страниц, которые я загрузил в DOM, используя стандартную функцию загрузки страницвстроенный в jQuery Mobile.Я просматривал документацию, сообщения на форумах, списки ошибок github и т. Д. И т. Д., И искал решение, и я полностью уверен в том, что могу делать неправильно.Я скомпилировал очень простой двухстраничный пример, который демонстрирует то, что я вижу.

Во-первых, у меня есть страница index.html в корневой папке моего примера сайта (т.е. /index.html), которая выглядиткак это: 

<!DOCTYPE html>
<html>
<head>
   <title>Home Page</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <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.js"></script>
</head>
<body>
<!-- main page -->
<div data-role="page" data-theme="b" id="main">
   <div data-role="header" data-theme="b">
      <h1>Home Page</h1>
   </div><!-- /header -->
   <div data-role="content">
      <ul data-role="listview" data-inset="true">
         <li><a href="news/">News</a></li>
      </ul>
   </div><!-- /content -->
</div><!-- /main page -->
</body>
</html>

У меня есть вторая страница в папке под названием «новости» (т.е. /news/index.html), которая выглядит так: 

<div data-role="page" data-theme="b" data-add-back-btn="true" id="news">
   <div data-role="header" data-theme="b">
      <h1>News</h1>
   </div><!-- /header -->
   <div data-role="content">
      TODO: page content goes here
   </div><!-- /content -->
</div><!-- /#news page -->

Итак, это работаетотличный.«Домашняя страница» загружается нормально.Поле адреса браузера показывает http://m.example.com/.

Я могу нажать на ссылку «Новости», чтобы загрузить эту страницу в DOM.Поле адреса браузера теперь показывает http://m.example.com/news/.Вот где моя проблема.Если вы нажмете кнопку перезагрузки браузера, страница /news/index.html будет перезагружена, но при этом полностью отсутствует основной контекст главной страницы, поэтому нет jQuery, CSS или правильной структуры документа HTML.Я ожидаю, что это будет так, учитывая URL и его содержание документа.Но мне нужны ссылки на подстраницы, чтобы они работали, когда на меня глубоко ссылаются извне моего мобильного сайта.

Если вы ссылаетесь на подстраницу с помощью http://m.example.com/#news/, это работает при правильной загрузке подстраницы и адресе браузера.поле автоматически переписывается на http://m.example.com/news/.Проблема в том, что людям нужно знать, что им нужно вручную редактировать URL-адрес, когда они добавляют в закладки, твит, электронное письмо и т. Д. URL-адрес страницы.

Есть ли способ автоматически отбросить браузерна домашнюю страницу и затем запустить загрузку подстраницы, прозрачной для пользователя, чтобы DOM был заново создан правильно?Чего мне не хватает?

Ответы [ 4 ]

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

Хорошо, основываясь на предложении Кейна, я изменил свой пример кода как таковой, и теперь он, кажется, работает так, как я хотел.

Страница index.html в корневой папке моего примера сайта (т.е. /index.html) теперь выглядит следующим образом: 

<!DOCTYPE html>
<html>
<head>
   <title>Home Page</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <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.js"></script>
   <script type="text/javascript">
if( window.firstload === undefined ) {
    window.firstload = true;
}
   </script>
</head>
<body>
<!-- main page -->
<div data-role="page" data-theme="b" id="main">
   <div data-role="header" data-theme="b">
      <h1>Home Page</h1>
   </div><!-- /header -->
   <div data-role="content">
      <ul data-role="listview" data-inset="true">
         <li><a href="news/">News</a></li>
      </ul>
   </div><!-- /content -->
</div><!-- /main page -->
</body>
</html>

И моя вторая страница в папке с именем 'news' (т.е. /news/index.html) теперь выглядит следующим образом: 

<script type="text/javascript">
if(window.firstload === undefined) {
    for(var i=0, c=0; i < window.location.href.length; i++){
      if(window.location.href.charAt(i) == '/') {
        c++;
        if(c==3) window.location = window.location.href.substr(0,i) 
                                   + '/#'
                                   + window.location.href.substr(i);
      }
    }
}
</script>
<div data-role="page" data-theme="b" data-add-back-btn="false" id="news">
   <div data-role="header" data-theme="b">
      <a href="#main" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse"></a>
      <h1>News</h1>
      <a href="#main" data-icon="home" data-role="button" data-iconpos="notext" data-transition="fade">Home</a>
   </div><!-- /header -->
   <div data-role="content">
      TODO: page content goes here
   </div><!-- /content -->
</div><!-- /#news page -->

При повторной загрузке,или глубокие ссылки / закладки, на подстранице теперь переводит посетителя на главную страницу и затем загружается на подстраницу правильно.На подстранице переадресация генерируется на http://m.example.com/#/news/.

Надеемся, что эта информация сэкономит кому-то еще несколько часов, стуча головой по клавиатуре.

1 голос
/ 29 декабря 2012

самый простой способ - это перенаправить на главную страницу: Пример subapge: login.htm 

<script type="text/javascript">
    window.location="index.htm";
</script>

<div data-role="page" id='login'>
    Ur sub page
</div><!-- /page -->

Код js будет запущен только при перезагрузке страницы, потому что только код с data-role = "page" вставляется через ajax.

1 голос
/ 07 декабря 2012

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

/**
 * fixes the problem where a subpage in jquerymobile will lose its back button after a refresh. Instead a refresh takes you back to the top page
 * /4361159/jquery-mobile-razryvy-pri-perezagruzke-dobavlenie-glubokih-ssylok-zakladok-v-dom-cherez-ajax
 */
if(window.firstload === undefined && /#.+$/.test(window.location.href)) {
    window.location = window.location.href.replace(/#.+$/, '');
}

Надеюсь, что поможет другим, которые испытывают эту проблему.

С наилучшими пожеланиями

Уилл Феррер

0 голосов
/ 02 февраля 2012

У меня похожая ситуация, когда я использую некоторую обработку на стороне сервера, чтобы определить, следует ли отображать содержимое в шаблоне моего сайта для новых запросов или только само содержимое для запросов от ajax.

По сути,Я просто добавляю в свои запросы ajax переменную post или get, называемую «частичной», и она решает, следует ли включать шаблон.

Если вы не хотите выполнять какую-либо работу на стороне сервера (это идеальный способсделайте это IMO), тогда единственный другой способ, который я могу придумать, - это добавить что-то подобное на каждую страницу: 

if( window.firstload === undefined )
{
    // Add script tags and stylesheets to the page and potentially load
    // your site template into the DOM

    window.firstload = true;
}

Когда первая страница загрузится, переменная window.firstload будет неопределенной, поэтому вы можете добавить всетеги сценариев и таблицы стилей для вашей страницы.Тогда при последующих загрузках страницы через ajax window.firstload будет установлен в true, чтобы это больше не повторилось.

...