Пытался сделать навигацию как в VK или других соц.сетях:
<html>
<head>
<script type="text/javascript" src="/node_modules/html5-history-api/history.js"></script>
<script type="text/javascript" src="/assets/vendors/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript">
$(function() {
var location = window.history.location || window.location;
$(document).on('click', 'a.ajax', function() {
history.pushState(null, null, this.href);
$.ajax({
url: this.href,
success: function(data){
$("#content").html(data);
}
});
return false;
});
$(window).on('popstate', function(e) {
$.ajax({
url: location.href,
success: function(data){
$("#content").html(data);
}
});
});
});
</script>
</head>
<body>
<a class="ajax" href="/test/page1.php">Page1</a>
<a class="ajax" href="/test/page2.php">Pgae2</a>
<div id="content"></div>
</body>
</html>
Как бы все работает, но если обновить страницу, то он тупо откроет тот файл, который был в адресной строке. Как этого избежать? Чтобы при обновление страницы, оставался этот контент, а так же само меню.