для работы с данной библиотекой просто подключите ее и работайте с ней так, как будто вы работаете со встроенными возможностями браузера.
Библиотека которая не добавляет ненужные методы заставляя их изучать, а оперирует по спецификации 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-2.0.2.js"></script>
<script type="text/javascript">
window.onload = function() {
// функция для ссылок обрабатывается при клике на ссылку
function handlerAnchors() {
// заносим ссылку в историю
history.pushState( null, null, this.href );
// тут можете вызвать подгрузку данных и т.п.
// не даем выполнить действие по умолчанию
return false;
}
// ищем все ссылки
var anchors = document.getElementsByTagName( 'a' );
// вешаем события на все ссылки в нашем документе
for( var i = 0; i < anchors.length; i++ ) {
anchors[ i ].onclick = handlerAnchors;
}
// вешаем событие на popstate которое срабатывает при нажатии back/forward в браузере
window.onpopstate = function( e ) {
// получаем нормальный объект Location
/* заметьте, это единственная разница при работе с данной библиотекой,
* так как объект document.location нельзя перезагрузить, поэтому
* библиотека history возвращает сформированный "location" объект внутри
* объекта window.history поэтому получаем его из "history.location".
* Для браузеров поддерживающих "history.pushState" получаем
* сформированный объект "location" с обычного "document.location".
*/
var returnLocation = history.location || document.location;
// тут можете вызвать подгрузку данных и т.п.
// просто сообщение
alert( "Мы вернулись на страницу со ссылкой " + returnLocation.href );
}
}
</script>
</head>
<body>
<a href="/mylink.html">My Link</a>
<a href="/otherlink.html">Other Link</a>
</body>
</html>
за простой пример не судите, на коленках написал.
А тепер показываю пример в связке с jQuery:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="history-2.0.2.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
// ищем все ссылки и вешаем события на все ссылки в нашем документе
$("a").click(function() {
// заносим ссылку в историю
history.pushState( null, null, this.href );
// тут можете вызвать подгрузку данных и т.п.
// не даем выполнить действие по умолчанию
return false;
});
// вешаем событие на popstate которое срабатывает при нажатии back/forward в браузере
$( window ).bind( "popstate", function( e ) {
// получаем нормальный объект Location
/*
* библиотека history возвращает сформированный "location" объект внутри
* объекта window.history поэтому получаем его из "history.location".
* Для браузеров поддерживающих "history.pushState" получаем
* сформированный объект "location" с обычного "document.location".
*/
var returnLocation = history.location || document.location;
// тут можете вызвать подгрузку данных и т.п.
// просто сообщение
alert( "Мы вернулись на страницу со ссылкой " + returnLocation.href );
});
});
</script>
</head>
<body>
<a href="/mylink.html">My Link</a>
<a 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-9
FireFox 3.6, 7, 12
Opera 11.6x, 12.00, Mobile
Chrome 18
Safari 5
Если у вас есть возможность протестировать в других браузерах то это будет очень здорово.
3.0.1 beta - Исправлена ошибка, не срабатывало событие popstate если до него было повешено событие hashchange.
3.1.0 beta - Были проблемы с формированием ссылок, так же разветвил версии сделал отдельную версию для IE8+ то есть вырезал все что связано с ИЕ7 и ниже
Подробнее о библиотеке вы можете прочитать статью на хабре:
http://habrahabr.ru/post/144071/
Проект на GitHub:
https://github.com/devote/HTML5-History-API
Ссылка для скачивания:
http://code.spb-piksel.ru/?history.latest.zip
TAGS: History API, history, pushState, смена ссылки без перезагрузки, ajax навигация, управление историей
Мне не жалко, но пока версия в статусе alpha нужно тестить и т.д. ну и доку написать, есть несколько просто тонкостей, но мелочные... плюс еще storage не написан для параметра state и title. Но писал я его один день, так что прошу раньше времени не судить. Замечания и баги пишем тут...
