Кроссбраузерная поддержка history.pushState

24 Дек
2011

Ни для кого не секрет что будущее в мире интернет страниц наступает довольно стремительно. Каждый день придумываются новые способы удивить людей более красивыми и динамичными проектами. Каждый день мы или наш начальник просит сделать что нибудь эдакое отличающее от другого большинства проектов. Как нам известно далеко не все разработчики браузеров стараются нам угодить, кто-то отстает с внедрением возможностей, кто-то на отрез их не хочет внедрять. Хотя второе конечно мало к кому относиться, как мы знаем есть один браузер который всегда затормаживает нас в движении к чему то новому. Да, да! Я конечно же имею ввиду наш любимый Internet Explorer. Я не буду высказывать плохие слова о компании разрабатывающей этот браузер, но именно этот браузер как бы это не было прискорбно, затормаживает нас в возможностях. Мы конечно же можем отказаться от него и не делать для него свои проекты. Но, мы не сможем заставить отказаться от него заказчиков. Поэтому, я разработал специальную библиотеку для работы с историей браузера.

Всем известно что есть много разных решений данной проблемы, с одной стороны они и не плохи, в чем то и хороши. Перепробовав несколько решений которые я смог найти в интернете, я пришел к выводу что это все совсем не то. Во первых они в большинстве случаев очень громоздки, создаются дополнительные классы для работы с ними, нужно изучать их перед тем как с ними работать, отключив их, наш проект совсем перестанет работать. Это все привело к решению реализовать простейшую библиотеку. Которая не заставит вас переписывать свой проект, потому что она работает совсем иначе.

Давай вспомним статью написанную пол года назад Введение в HTML5 History API в ней описано то что из себя представляет history API.

Прочли, освежили память? Теперь я могу спокойно предоставить вам библиотеку, которая вам даст возможность использовать то самое решение которое описано в статье выше. Все что вам потребуется это лишь подключить данную библиотеку и работать с этим API в любом браузере, даже в том который не поддерживает это решение.

С библиотекой работать очень легко, в ней конечно же как и у большинства библиотек есть свои тонкости.

подключение библиотеки происходит обычным образом:
<script type="text/javascript" src="history-1.1.js"></script>

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

У нее есть пару дополнительных параметров, которые указываются при ее подключении.

Первый параметр — basepath, который говорит библиотеке о том какая папка будет корневой, это нужно в том случае если ваш сайт лежит в папке отличной от DOCUMENT_ROOT, тоесть не в корне а в папке, например http://testsite.com/sitefolder/.

Второй параметр — redirect, говорит о том нужно ли перенаправлять с ссылок вида http://testsite.com/#/folder/ на ссылку http://testsite.com/folder/ в случае если браузер имеет нативную поддержку history API. Так же наоборот если браузер не поддерживает history API, то произойдет редирект с ссылки http://testsite.com/folder/ на ссылку http://testsite.com/#/folder/

указывать эти параметры нужно при подключении библиотеки. Пример:
<script type="text/javascript" src="history-1.1.js?basepath=/sitefolder/&redirect=false"></script>


Так же имеется вторая тонкость, как нам известно при срабатывании события popstate, document.location тут же имеет ссылку на страницу которую запросили из истории.

window.addEventListener("popstate", function(){

    alert( document.location ); // - имеем ссылку полученную из истории браузера.

}, false );


эта библиотека не может перезагрузить объект location, поэтому ссылку из истории она кладет в объект event.

Для полноценной работы нужно будет писать вот такой код:

if ( window.addEventListener ) {

    window.addEventListener('popstate', function( e ) {

        var loc = e.location || document.location;

        alert( loc );

    }, false);

} else if ( window.attachEvent ) {

    window.attachEvent('onpopstate', function( e ) {

        var loc = e.location || document.location;

        alert( loc );

    });

}



Вот собственно и вся работа с библиотекой, больше тонкостей нет. Так же поддерживается параметр state.

Скачать библиотеку можно отсюда.
Посмотреть в действии можно тут, правда демонстрация еще не доделана, но примерно что-то уже можно увидеть.

Приятного использования!
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх