[英]history.pushstate fails browser back and forward button
I'm using jQuery to dynamically load content in a div container. 我正在使用jQuery动态加载div容器中的内容。
The server side code detects if the request is AJAX or GET. 服务器端代码检测请求是AJAX还是GET。
I want the browsers back/forward buttons to work with the code so I try to use history.pushState. 我希望浏览器后退/前进按钮使用代码,所以我尝试使用history.pushState。 I've got to following piece of code:
我必须遵循一段代码:
$('.ajax').on('click', function(e) {
e.preventDefault();
$this = $(this);
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('');
$('#ajaxContent').load($this.attr('href'), function() {
window.history.pushState(null,"", $this.attr('href'));
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
});
Everything works fine except when browsing with the browsers back/forward button, the adress in the bar changes according to plan but the page doesn't change. 一切正常,除非使用浏览器后退/前进按钮浏览时,栏中的地址会根据计划更改,但页面不会更改。 What am I doing wrong?
我究竟做错了什么?
Updated script with the help from Clayton's answer 在Clayton的回答帮助下更新了脚本
var fnLoadPage = function(url) {
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('').load(url, function() {
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
};
window.onpopstate = function(e) {
fnLoadPage.call(undefined, document.location.href);
};
$(document).on('click', '.ajax', function(e) {
$this = $(this);
e.preventDefault();
window.history.pushState({state: new Date().getTime()}, '', $this.attr('href'));
fnLoadPage.call(undefined, $this.attr('href'));
});
@Barry_127, see if this will work for you: http://jsfiddle.net/SX4Qh/ @ Barry_127,看看这是否适合你: http : //jsfiddle.net/SX4Qh/
$(document).ready(function(){
window.onpopstate = function(event) {
alert('popstate fired');
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('')
.load($(this).attr('href'), function() {
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
};
$('.ajax').on('click', function(event) {
event.preventDefault();
alert('pushstate fired');
window.history.pushState({state:'new'},'', $(this).attr('href'));
});
});
If you take a look at the fiddle I provided and click the button, the alert will fire showing that you are pushing a new state. 如果您看一下我提供的小提琴并单击按钮,警报将显示您正在推动新状态。 If you then proceed to click the back button once the pushstate has fired, you will see that the previous page (or popstate) will fire.
如果您在触发状态触发后继续单击后退按钮,您将看到上一页(或popstate)将触发。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.