History.js - правильная реализация

Я загружаю свой контент на свой сайт в div с именем #container с JQuery/Ajax. У меня есть разные типы ссылок:

  • нормальные привязные ссылки
  • JQuery-Triggers, которые запускают событие при нажатии на определенный div.

Теперь я хочу добавить функциональные возможности для поддержки обратных и пересылаемых кнопок браузера и функциональности закладки. Я наткнулся на history.js, но у меня есть несколько проблем с ним и не могу найти действительно простой учебник, как правильно его использовать.

Мои ссылки:

<a href="#imprint">Imprint</a>

Я читал, что SEO лучше использовать <a href="imprint/" <="" code="">... но этот URL-адрес не будет найден на моем сервере. Поэтому мой <span> первый</span> вопрос заключается в том, как я могу гарантировать, что myurl.com/imprint работает и не приводит к 404 страницам?</a>

<a href="imprint/" <="" code=""> <p>Прибыв в history.js... На данный момент я включил следующий код в свой index.php прямо за </p> </a>
1 ответ

Для старых браузеров вы можете использовать эту библиотеку: https://github.com/devote/HTML5-History-API полностью эмулирует историю в старых браузерах.

$( document ).ready(function() {
 function loadContent( href ) {
 alert( "loading content... from url: " + href );
 // load dynamic content here
 }
 $( window ).bind( 'popstate', function( e ) {
 // the library returns the normal URL from the event object
 var cLocation = history.location || document.location;
 alert( [ cLocation.href, history.state ] );
 loadContent( cLocation.pathname + cLocation.search + cLocation.hash );
 });
 $('#footer.credits').on('click','.link_imprint',function() {
 var currentUrl = $( this ).attr( 'href' );
 loadContent( currentUrl );
 history.pushState( null, null, currentUrl );
 });
});

licensed under cc by-sa 3.0 with attribution.