Javascript-форум - history рассширение для браузеров не поддерживающих pushState, replaceState

для работы с данной библиотекой просто подключите ее и работайте с ней так, как будто вы работаете со встроенными возможностями браузера.

Библиотека которая не добавляет ненужные методы заставляя их изучать, а оперирует по спецификации 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 навигация, управление историей