Работа с историей в браузире.
Доброе время суток всем.
Есть такой код: Демо - http://alpaca.org.ua/graph/address/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Push</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style>
#wrapper {
position: relative;
margin: 0 auto;
border: 1px #c2c2c2 solid;
width: 920px;
height: 520px;
overflow: hidden;
}
#slider {
background: #EDEDED;
width: 900px;
height: 520px;
position: absolute;
padding: 10px;
}
.go {
background-color: violet;
border-radius: 50%;
display: block;
width: 50px;
height: 50px;
position: absolute;
top: -23px;
overflow: hidden;
text-indent: -999px;
}
#test1 {
}
#test2 {
left: 70px;
}
#test3 {
left: 140px;
}
#nav {
background-color: blue;
position: relative;
margin: 30px auto;
width: 180px;
height: 3px;
}
</style>
<script>
$(document).ready(function(){
$('.go').bind('click', function() {
var ur = $(this).attr('href');
$.ajax({
url: ur,
success: function(data) {
$('#slider').text(data);
history.pushState(null, null, ur);
slid();
}
});
$('.go').each(function() {
$(this).css('background', 'violet');
});
$(this).css('background', 'blue');
});
function slid() {
$('#slider').css({right: '-900px'});
$('#slider').animate({right: "0"}, 300);
}
});
</script>
</head>
<body>
<div id='nav'>
<a href="test.php" class='go' id='test1' onclick='return false;'>test1</a>
<a href="test2.php" class='go' id='test2' onclick='return false;'>test2</a>
<a href="test3.php" class='go' id='test3' onclick='return false;'>test3</a>
</div>
<div id='wrapper'>
<div id='slider'>Главная страница</div>
</div>
</body>
</html>
Нужно что бы при смене адреса в строке и обновлении страницы не перекидывала на test3.php и пр. Знаю, что нужно как-то ловить событие popstate, но не могу разобраться до конца, помогите. |
Во-первых, при прямом запросе файла - должен отдаваться контент вместе с шаблоном. Это на случай F5 или перехода по прямой ссылке. Тут поможет анализ заголовка X-Requested-With, который в случае xhr будет равен "XMLHttpRequest"
Во-вторых нужно слушать событие window@popstate возникающее при навигации по истории |
То есть нужно на сервере анализировать заголовок X-Requested-With?
Часто вижу такой код
window.onload=function(){
window.setTimeout(
function()
{
window.addEventListener(
"popstate",
function(e) {
//ajax загрузка нужной части сайта.
e.preventDefault();
},
false
);
},
1);
}
Не могу понять, что он делает? |
Как задействовать кнопки вперед назад?
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 12:43. |