我已经找到了如何修复后退按钮,但前进按钮仍然无法修复。网址会更改,但页面不会重新加载,这就是我正在使用的:
$('.anchor .wrapper').css({
'position': 'relative'
});
$('.slanted').css({
'top': 0
});
// Do something after 1 second
$('.original-page').html('');
var href = '/mission.html'
console.log(href);
// $('#content-div').html('');
$('#content-div').load(href + ' #content-div');
$('html').scrollTop(0);
// loads content into a div with the ID content_div
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: ' + href, href);
window.onpopstate = function(event) {
location.reload();
};
// response.headers['Vary'] = 'Accept';
// window.onpopstate = function (event) {
// alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
// location.reload();
// response.headers['Vary'] = 'Accept';
// };
// $(window).bind('popstate', function () {
// window.onpopstate = function (event) {
// window.location.href = window.location.href;
// location.reload();
// };
e.preventDefault();
正如您所看到的,我尝试了几种不同的方法,后退按钮工作正常,但前进按钮不行。
请记住history.pushState()
将新状态设置为最新的历史状态。和window.onpopstate
在您设置的状态之间导航(向后/向前)时调用。
所以不要pushState
当。。。的时候window.onpopstate
被调用,因为这会将新状态设置为最后一个状态,然后就没有什么可以继续了。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)