我正在使用jQuery来动态地加载div容器中的内容.
我想让浏览器的后退/前进按钮使用代码,所以我尝试使用history.pushState.我必须遵循一些代码：
$('.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();
});
});
});
一切正常,除非浏览浏览器后退/转发按钮,否则栏中的地址会根据计划而改变,但页面不会更改.我究竟做错了什么？
在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,看看这是否适合你：
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'));
});
});
如果你看看我提供的小提琴,然后点击按钮,警报会开始显示你正在推动一个新的状态.如果随后pushstate触发后,继续单击后退按钮,您将看到上一页(或popstate)将触发.
