У меня есть мобильный сайт, который состоит из одной HTML-страницы (Mobile.html). Содержимое загружается динамически в форматированные div JQM data-role="page". Единственный статический контент на странице - это тег body; все остальное создается и разрушается, когда пользователь взаимодействует со страницей, которая создает DOM из вызовов веб-службы.
Все это работает очень хорошо, за одним серьезным исключением. Обработка ссылок не работает. После того, как JQM добавлен в хэш URL-адреса, происходит перерыв обновления и навигации. Я тестировал различные решения этой проблемы, и пока что ни один из них не работает.
Используя ночные сборки JQM и 1.0A4.1, я упростил задачу в этом тестовом коде:
<body id='CswMobile'>
<div id="StaticPage1" data-role="page" >
<div id="StaticHeader1" data-role="header"><h1>Static Header 1</h1></div>
<div id="StaticContent1" data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#StaticPage1">Static Page 1</a></li>
<li><a href="#StaticPage2">Static Page 2</a></li>
<li><a href="#DynamicPageA">Dynamic Page A</a></li>
<li><a href="#DynamicPageB">Dynamic Page B</a></li>
</ul>
</div>
</div>
<div id="StaticPage2" data-role="page">
<div id="StaticHeader2" data-role="header"><h1>Static Header 2</h1></div>
<div id="StaticContent2" data-role="content">
<ul data-role="listview" data-theme="b">
<li><a href="#StaticPage1">Static Page 1</a></li>
<li><a href="#StaticPage2">Static Page 2</a></li>
<li><a href="#DynamicPageA">Dynamic Page A</a></li>
<li><a href="#DynamicPageB">Dynamic Page B</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#StaticPage1').live('tap', function (event) { return onClick(event); });
function onClick(event)
{
var id = $(event.target.outerHTML).attr('href');
var $page = $(id);
if ($page.length === 0) $page = makePage(id);
$page.live('tap', function (event) { return onClick(event); });
$.mobile.changePage($page, 'slide');
return false;
}
function makePage(id)
{
id = id.replace('#', '');
$('body').append('<div id="' + id + '" ' + 'data-role="page">')
var $page = $('#' + id);
$page.append('<div id="Header_' + id + '" ' + 'data-role="header"><h1>Header of ' + id + '</h1>');
var $header = $('#Header_' + id);
$page.append('<div id="Content_' + id + '" ' + 'data-role="content">');
var $content = $('#Content_' + id);
$page.append('<div id="Footer_' + id + '" ' + 'data-role="footer">');
var $li1 = $('<li><a href="#StaticPage1">Static Page 1</a></li>');
var $li2 = $('<li><a href="#StaticPage2">Static Page 2</a></li>');
var $li3 = $('<li><a href="#DynamicPageA">Dynamic Page A</a></li>');
var $li4 = $('<li><a href="#DynamicPageB">Dynamic Page B</a></li>');
var $ul = $('<ul data-role="listview" data-theme="b"></ul>').append($li1).append($li2).append($li3).append($li4);
$content.append($ul);
return $page;
}
</script>
Статическое содержимое работает так, как вы ожидаете, но динамическое содержимое вызывает непредвиденное поведение, обычно это ошибка 404 (GET http://localhost/DynamicPageA 404 (не найдено)) или JQM «Загрузка ...» анимация по недействительному URL в адресной строке браузера (http://localhostDynamicPageA).
Во-первых, я не могу заставить работать обработку ссылок без вызова $.mobile.changePage();. К этому времени новый контент уже находится в DOM - так почему же JQM не может обработать ссылку?
Во-вторых, changePage (), кажется, внедряет свои причуды. Двойной щелчок по одному и тому же элементу динамического списка возвращает ошибку 404. Обновление браузера по динамической ссылке возвращает 404.
Как проще всего решить эту проблему с помощью инфраструктуры JQM?
Edit:
Добавление атрибута data-url в div «page» решает часть проблемы - обработка ссылок теперь работает по щелчку для динамического содержимого; однако назад (используя автоматически сгенерированную кнопку «Назад» в JQM) и обновление все еще не работает.
- Кнопка «Назад» генерирует этот URL: http://localhostdynamicpagea/# с этой ошибкой: «Fiddler: сбой поиска DNS для localhostdynamicpagea. Такой хост не известен». Back браузера работает нормально, поэтому я могу просто прокрутить собственную кнопку «Back», чтобы решить эту проблему.
- Обновление браузера на динамической странице по-прежнему создает пустой экран с этой ошибкой журнала консоли: «GET http://localhost/DynamicPageB 0 ()». Я ожидаю обновления страницы по этому URL: http://localhost/Mobile.html#DynamicPageB, чтобы обновить Mobile.html без динамического хеша.