Я поместил успешный минимальный пример истории HTML5 здесь: http://cairo140.github.com/html5-history-example/one.html
На мой взгляд, самый простой способ войти в push5-состояние HTML5 - это некоторое время игнорировать инфраструктуру и использовать максимально упрощенный переход состояния: полная замена элементов <body> и <title>. За пределами этих элементов остальная часть разметки, вероятно, просто шаблонная, хотя, если она меняется (например, если вы изменяете класс на HTML в бэкэнде), вы можете адаптировать это.
То, что делает такой динамический бэкэнд, как CI, - это, по сути, имитация существования данных в определенных местах (идентифицируемых по URL) путем их динамического генерирования на лету. Мы можем абстрагироваться от влияния фреймворка, буквально создав ресурсы и разместив их в тех местах, через которые ваш веб-сервер (вероятно, Apache) просто идентифицирует их и передает через них. У нас будет очень простая структура файловой системы относительно корня домена:
/one.html
/two.html
/assets/application.js
Это только три файла, с которыми мы работаем.
Вот код для двух файлов HTML. Если вы на уровне, когда имеете дело с функциями HTML5, вы должны понимать разметку, но если я ничего не прояснил, просто оставьте комментарий, и я проведу вас через него: 1013 *
one.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>One</title>
</head>
<body>
<div class="container">
<h1>One</h1>
<a href="two.html">Two</a>
</div>
</body>
</html>
two.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>Two</title>
</head>
<body>
<div class="container">
<h1>Two</h1>
<a href="one.html">One</a>
</div>
</body>
</html>
Вы заметите, что если вы загрузите one.html через браузер, вы можете нажать на ссылку two.html, которая загрузит и отобразит новую страницу. И с two.html вы можете сделать то же самое обратно к one.html. Круто.
Теперь по части истории:
активы / application.js
$(function(){
var replacePage = function(url) {
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function(data){
var dom = $(data);
var title = dom.filter('title').text();
var html = dom.filter('.container').html();
$('title').text(title);
$('.container').html(html);
}
});
}
$('a').live('click', function(e){
history.pushState(null, null, this.href);
replacePage(this.href);
e.preventDefault();
});
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
});
Как это работает
Я определяю replacePage в обратном вызове jQuery ready, чтобы выполнить простую загрузку URL-адреса в аргументе и заменить содержимое элементов title и .container на удаленные.
Вызов live означает, что любая ссылка, нажатая на страницу, вызовет обратный вызов, и обратный вызов переводит состояние в href в ссылке и вызывает replacePage. Он также использует e.preventDefault, чтобы предотвратить нормальную обработку ссылки.
Наконец, есть событие popstate, которое срабатывает, когда пользователь использует браузерную навигацию по страницам (назад, вперед). Мы привязываем простой обратный вызов к этому событию. Следует отметить, что мне не удалось заставить версию на странице «Погружение в HTML» по какой-то причине работать в FF для Mac. Понятия не имею, почему.
Как его продлить
Этот чрезвычайно простой пример может быть более или менее перенесен на любой сайт, потому что он выполняет очень творческий переход: замена HTML. Я предлагаю вам использовать это в качестве основы и перейти к более творческим переходам. Одним из примеров того, что вы могли бы сделать, было бы подражать тому, что делает Github с навигацией по каталогам в своих репозиториях. Это промежуточный маневр, который требует поплавков и управления переполнением. Вы можете начать с более простого перехода, например, добавив .container на загруженной странице в DOM, а затем анимируя старый контейнер в {height: 0}.
Обращаясь к вашему конкретному "Например"
Вы на правильном пути для использования истории HTML5, но вам необходимо уточнить ваше представление о том, что именно будут содержать /foo и /bar. По сути, у вас будет три страницы: /, /foo и /bar. / будет иметь пустой контейнер div. /foo будет идентичным /, за исключением того, что в контейнере div есть содержимое foo. /bar будет идентичным /foo, за исключением того, что в контейнере div есть некоторое содержание бара. Теперь возникает вопрос, как вы могли бы извлечь содержимое контейнера через Javascript. Предполагая, что ваш тег /foo body выглядит примерно так:
<body>
<a href="/foo">foo</a>
<a href="/bar">bar</a>
<div class="container">foo</div>
</body>
Затем вы извлекаете его из ответа с data по var html = $(data).filter('.container').html() и затем возвращаете его на родительскую страницу через $('.container').html(html).Вы используете filter вместо гораздо более разумного find, потому что по какой-то дурацкой причине анализатор DOM jQuery создает объект jQuery, содержащий каждого дочернего элемента head и каждого дочернего элемента body вместо просто объекта jQuery.обертывание элемента html.Я не знаю почему.
Остальные просто адаптируют это обратно в версию "vanilla" выше.Если вы застряли на каком-либо конкретном этапе, дайте мне знать, и я могу помочь вам лучше, хотя это.
Код
https://github.com/cairo140/html5-history-example