Я создаю мобильный сайт с помощью jQuery Mobile, и один из моих тестировщиков указал на проблему при повторной загрузке, глубоких ссылках или добавлении закладок на любые страницы, которые я загрузил в DOM, используя стандартную функцию загрузки страниц, встроенную в jQuery. Мобильный. Я просматривал документацию, сообщения на форуме, списки ошибок 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 был воссоздан правильно? Что мне не хватает?
