Описание объекта history
, в т.ч. метода history.history.pushState()
Полный пример работы Ajax навигации
Минимальный пример для общего понимания принципа работы history.pushState()
:
test1.php:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>
<ul class="menu">
<li><a href="test1.php" class="test">загрузить текст для test1.php</a></li>
<li><a href="test2.php" class="test">загрузить текст для test2.php</a></li>
</ul>
<div class="content"></div>
test2.php:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>
<ul class="menu">
<li><a href="test1.php" class="test">загрузить текст для test1.php</a></li>
<li><a href="test2.php" class="test">загрузить текст для test2.php</a></li>
</ul>
<div class="content"></div>
test3.php
<?php
if(!empty($_POST["page"]))
{
switch($_POST["page"]){
case 'test1.php':
echo 'это текст для страницы test1.php';
break;
case 'test2.php':
echo 'это текст для страницы test2.php';
break;
}
}
?>
test.js
$(function(){
function load_content()
{
$.post("test3.php", {page: location.pathname.substring(1)},
function(data){
$(".content").html(data);
});
}
load_content();
$(".test").on("click", function(){
var href = $(this).attr("href");
history.pushState({param: 'Value'}, '', href);
$.post("test3.php", {page: href}, function(data){
$(".content").html(data);
});
return false;
});
})
Принцип работы:
страницы test1.php
и test2.php
имеют одинаковый шаблон. После загрузки страницы
отправляем обработчику(test3.php
) конечный адрес из url, который выдает нужный контент(текст) в зависимости от поступивших данных. Если на странице Вы нажмете на любую из ссылок, то произойдет добавление в историю новой записи(смена ссылки
через history.pushState
) и выполнится запрос к обработчику, который вернет нужный контент.
history.pushState()
. Кроме этого Вам нужно будет написать обработчик, который в зависимости от адреса будет отдавать нужный контент при загрузке страницы – Alex 17 окт '17 в 19:38