Для браузеров, которые не поддерживают History API можно написать костыль с хэшами. Проверить, работает ли в вашем браузере эта фича можно так:
function isHhistoryApiAvailable() {
return !!(window.history && history.pushState);
}
А теперь сделаем небольшое Демо. У нас будет страница с общим шаблоном (index.php):
Это общий шаблон, динамическое содержимое будет находиться в #content. Соответственно, страницы pageN.php не будут содержать в себе всего шаблона, а только контент. jQuery я подключил только для того, чтобы было меньше кода, так как будет ajax. Ниже приведен JS, который получает при клике на ссылку содержимое и вставляет его в #content.
$(document).ready(function() {
$('a').click(function() {
var url = $(this).attr('href');
$.ajax({
url: url + '?ajax=1',
success: function(data){
$('#content').html(data);
}
});
// А вот так просто меняется ссылка
if(url != window.location){
window.history.pushState(null, null, url);
}
// Предотвращаем дефолтное поведение
return false;
});
});
Параметр ajax=1 передается для того, чтобы сервер определил, что нам нужно. При начальной загрузке страницы этот параметр не будет отправлен, в этом случае возвращаем меню и скрипт. Если же параметр передан, то возвращаем только контент.
И еще небольшой кусочек кода, который делает рабочими кнопки “Вперед” и “Назад”.
$(window).bind('popstate', function() {
$.ajax({
url: location.pathname + '?ajax=1',
success: function(data) {
$('#content').html(data);
}
});
});





