для работы с данной библиотекой просто подключите ее и работайте с ней так, как будто вы работаете со встроенными возможностями браузера.
Библиотека которая не добавляет ненужные методы заставляя их изучать, а оперирует по спецификации w3c, по интерфейсу History.
Для примера могу привести короткий код как с ней работать.
По принципу мы работаем с HTML5 History API так как описано например тут
http://htmlbook.ru/html5/history или по спецификации
http://www.w3.org/TR/html5/history.h...tory-interface то-есть коротенький пример:
на чистом JS:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="history.js"></script>
<script type="text/javascript">
(function(eventInfo) {
// вешаем события на все ссылки в нашем документе
document[eventInfo[0]](eventInfo[1] + 'click', function(event) {
event = event || window.event;
var target = event.target || event.srcElement;
// ищем все ссылки с классом 'ajax'
if (target && target.nodeName === 'A' &&
(' ' + target.className + ' ').indexOf('ajax') >= 0)
{
// заносим ссылку в историю
history.pushState(null, null, target.href);
// тут можете вызвать подгрузку данных и т.п.
// не даем выполнить действие по умолчанию
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
}, false);
// вешаем событие на popstate которое срабатывает при нажатии back/forward в браузере
window[eventInfo[0]](eventInfo[1] + 'popstate', function(event) {
// получаем нормальный объект Location
/*
* заметьте, это единственная разница при работе с данной библиотекой,
* так как объект document.location нельзя переопределить, поэтому
* библиотека history возвращает сформированный "location" объект внутри
* объекта window.history, поэтому получаем его из "history.location".
* Для браузеров поддерживающих "history.pushState" получаем
* сформированный объект "location" с обычного "document.location".
*/
var returnLocation = history.location || document.location;
// тут можете вызвать подгрузку данных и т.п.
// просто сообщение
alert("We returned to the page with a link: " + returnLocation.href);
}, false);
})(window.addEventListener ? ['addEventListener', ''] : ['attachEvent', 'on']);
</script>
</head>
<body>
<a class="ajax" href="/mylink.html">My Link</a>
<a class="ajax" href="/otherlink.html">Other Link</a>
</body>
</html>
за простой пример не судите, на коленках написал.
Вы можете использовать дополнительные параметры конфигурации библиотеки:
history-1.2.8.min.js?basepath=/pathtosite/ - базовый путь к сайту, по умолчанию имеет значение корня "/".
history-1.2.8.min.js?redirect=true - включить преобразование ссылок.
history-1.2.8.min.js?type=/ - подставлять подстроку после якоря, по умолчанию ничего не подставляет.
Также вы можете комбинировать опции:
history-1.2.8.min.js?type=/&redirect=true&basepath=/pathtosite/ - порядок опций не имеет значение.
Демо-сайт
тут, пока еще в разработке но посмотреть что-то можно.
Преимущества от библиотеки
Balupton History. Весит в три раза меньше, работать проще, никаких лишних дополнительных методов, поддерживает все браузеры которые в ходу.
1.2.1 - Обновил версию, добавил полную поддержку
replaceState и параметра
title - огромное спасибо
trikadin за помощь в реализации
replaceState.
1.2.2 - Исправил серьезную ошибку, которая не позволяла событию идти по цепи. Проблема была в том что если на событие popstate повесить два и более обработчика, то срабатывало только лишь одно первое. Остальные не получали событие.
1.2.3 - Исправлена работа с относительными ссылками и добавлен параметр
type для возможности изменить тип отображения якоря в браузерах не поддерживающих history.pushState теперь можно настроить любой для вас удобный вид для ссылки. По умолчанию этот параметр пустой, и ссылки выглядят
http://somesite.com/#path, вы можете добавить например слешь, и ваша ссылка будет выглядеть так:
http://somesite.com/#/path.
1.2.4 - Исправлена назначение текущего параметра history.state при вызове pushState ( Спасибо "
zebra" )
1.2.5 - Исправлена ошибка вызывающая exception при возврате значения state.
1.2.6 - Добавлена возможность вешать событие через window.onpopstate.
1.2.7 - Исправлена ошибка в работе с сайтами имеющими иной порт от стандартных.
1.2.7a - Добавлена поддержка ИЕ6.
1.2.8 - Исправлена замусоривание глобального пространства.
2.0 - Полностью переписана библиотека с нуля, исправлено некорректное сохранение state, убраны провисания, переделана система управления кнопками back/forward, и много другое. Ну и как всегда, стала более оптимизирована, весить стала меньше, работать быстрее.
2.0.1 - Исправлен отказ работы во фрейме и при использовании frameset'ов.
2.0.2 - Исправлена назначение document.title, при отсутствующем титле назначал null.
2.0.3 -
Добавлен объект Location в экземпляр History, теперь текущий URL можно получить из любого места в документе: alert( history.location || document.location );
Исправлена ошибка работы с URL адресами, имеющие другой регистр символов.
Переделано использование sessionStorage, теперь для библиотеки выделяется отдельная ячейка в хранилище.
2.0.4 - Исправлена работа библиотеки в FireFox ниже 4-ой версии.
3.0 beta - Полностью переработанная версия.
Что в ней нового.
Теперь библиотека не просто добавляет API в браузеры где ее нет, но и исправляет баги/недоделки в браузерах где они имеются.
Chrome, Safari - Убрана стартовое событие при загрузке документа.
Safari - добавлено свойство state в объект window.history
Opera - добавлено срабатывание события popstate при смене hash документа, по спецификации оно должно срабатывать при любой смене объекта state.
Добавлен объект Location в интерфейс History, теперь history.location работает во всех браузерах и ничем не отличаеться от объекта window.location. То-есть теперь вы можете применять на нем все теже действия что и на обычном window.location.
Библиотека была протестирована в браузерах:
IE 6+
FireFox 3.6+
Opera 11.6x+, Mobile
Chrome 18+
Safari 5+
Если у вас есть возможность протестировать в других браузерах то это будет очень здорово.
3.0.1 beta - Исправлена ошибка, не срабатывало событие popstate если до него было повешено событие hashchange.
3.1.0 beta - Были проблемы с формированием ссылок, так же разветвил версии сделал отдельную версию для IE8+ то есть вырезал все что связано с ИЕ7 и ниже
3.1.1 beta - Не менялся адрес в адресной строке если на странице присутствовал хоть один frame/iframe
3.1.2 beta - Переставал работать в ИЕ9 при переключении браузера в режим совместимости.
3.1.3 beta - Не правильно работал параметр redirect/basepath. при указании basepath=/path/ и при переходе по ссылке
http://somesite.com/path получали ссылку
http://somesite.com/path/path -
подробнее
3.2.0 - Реализован метод
history.redirect() и исправлена работа с обычными хешами в ссылках.
Подробнее.
3.2.1 - Не корректно работала библиотека c относительными ссылками в IE 10.
Подробнее.
3.2.2 - Firefox не вызывал события объекта window при подключении библиотеки.
Подробнее.
4.0.0 - Новая версия, переписана с нуля. Исправлены ошибки в работе на мобильных браузерах и многие ошибки на десктопных браузерах.
4.0.5 - Мелкие правки.
4.1.6 - Поддержка AMD и многое другое.
Подробнее о библиотеке вы можете прочитать статью на хабре:
http://habrahabr.ru/post/144071/
Проект на GitHub:
https://github.com/devote/HTML5-History-API
Ссылка для скачивания:
http://code.spb-piksel.ru/?history.latest.zip
Важно! Мне часто стали писать/сообщать о неработоспособности библиотеки в ИЕ9. Проблема связана с тем, что ИЕ9 капризный браузер и придирается ко всем мелочам. Как выяснилось, многие разработчики что используют скрипты взятые с GitHub сталкиваются с проблемами их неработоспособности, потому что ИЕ9 при подключении скриптов ожидает получить заголовок application/javascript, но GitHub возвращает заголовок text/plain. Поэтому подключать скрипты напрямую с GitHub не рекомендуется. Скачайте скрипт к себе на хост и используйте.
TAGS: History API, history, pushState, смена ссылки без перезагрузки, ajax навигация, управление историей