Сводка:
При загрузке активов с использованием AJAX-модели jQuery Mobile для страниц отображается неверный URL.
Сценарий:
2 веб-сайта:
- mydomain.com -> обычный сайт (здесь нет проблем, забудьте об этом)
- mydomain.com / mobile -> мобильный сайт
Реализация:
Все мобильные страницы имеют чистый URL-адрес, например mydomain.com/mobile/page, т.е.: mydomain.com / mobile / home , mydomain.com / mobile / aboutus , mydomain.com / mobile / contact , ...
Таким образом, все мобильные страницы имеют в своей "голове" секциюбазовый URL-адрес, например
<base href="mydomain.com/mobile/" />
, чтобы все ресурсы работали с относительными (и чистыми) URL-адресами.
Что работает:
Когдадоступ к страницам с использованием полного URL-адреса или отключение модели навигации по страницам в jQuery Mobile ($.mobile.ajaxEnabled = false) - все (ссылки, ресурсы) работает как шарм.
Проблема:
Когда я неВ модели навигации по страницам jQuery Mobile первая открытая мобильная страница работает нормально, но после этого, когда я перехожу по ссылке на странице, новая страница загружается через Ajax и внедряется в DOM, но все ресурсы / ссылки с относительными(и очистить) URL перестают работать.У них неправильный URL.
Пример:
Когда я посещаю mydomain.com / mobile / aboutus" aboutus"имеет изображение логотипа с относительным URL logo.png (абсолютное значение будет mydomain.com / mobile / logo.png ), которое отображается правильно.Но когда я захожу на mydomain.com / mobile / home и нажимаю ссылку на mydomain.com / mobile / aboutus , страница " aboutus " загружаетсяно URL изображения логотипа изменяется на aboutlogo.png вместо правильного logo.png
Ссылка: http://jquerymobile.com/test/docs/pages/docs-navmodel.html
Другим ключевым компонентом модели навигации по страницам в jQuery Mobile является базовый элемент, который вставляется в заголовок и изменяется при каждом изменении страницы, чтобы гарантировать, что любые ресурсы (css, images, js и т. Д.), На которые есть ссылки на этомстраница будет запрашиваться по правильному пути.В браузерах, которые не поддерживают динамическое обновление базового элемента (например, Firefox 3.6), jQuery Mobile просматривает все ссылочные ресурсы на странице и префиксирует их атрибуты href и src с базовым путем.
Вопрос:
¿Я делаю это неправильно? ¿Это ошибка или я неправильно понял документацию ¿Как я могу получить ресурсы, загруженные через AJAX, чтобы иметь правильный URL-адрес?.
Я хочу использовать модель навигации по страницам в jQuery Mobile, чтобы иметь необычные переходы в мобильных браузерах.
Показать мне код!:
mydomain.com / mobile / home код:
<!DOCTYPE html>
<head>
<base href="http://mydomain.com/mobile/" />
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.min.js"></script>
...
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">Foo</div><!--header -->
<div data-role="content">
<a href="about">About us</a>
</div><!--content -->
<div data-role="footer">Bar</div><!--footer -->
</div><!--page -->
</body>
</html>
mydomain.com / mobile / about код:
<!DOCTYPE html>
<head>
<base href="http://mydomain.com/mobile/" />
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.min.js"></script>
...
</head>
<body>
<div id="about" data-role="page">
<div data-role="header">Foo</div><!--header -->
<div data-role="content">
<img src="logo.png" alt=""/><!--broken when loaded via AJAX-->
<a href="home" data-role="button" data-rel="back">Back</a><!--broken when loaded via AJAX-->
</div><!--content -->
<div data-role="footer">Bar</div><!--footer -->
</div><!--page -->
</body>
</html>