使用history.pushState后前进按钮失效问题求助

我明白你的困扰——后退按钮已经正常工作，但前进按钮点击后URL更新了，页面却纹丝不动。看了你的代码，问题主要出在popstate事件的处理逻辑上，咱们来一步步修复它：

问题分析 #

你当前的window.onpopstate只是简单调用location.reload()，而且pushState没有传入有效的状态数据，这会导致前进触发事件时，无法精准地加载对应页面内容；另外代码里还有一些注释掉的重复事件绑定，可能也会干扰逻辑。

修复方案 #

1. 优化pushState的使用 #

把要跳转的URL存入pushState的state对象中，这样后续触发popstate时可以直接获取这个URL：

// 替换原来的pushState代码
history.pushState({ url: href }, 'New URL: ' + href, href);

2. 重构popstate事件处理逻辑 #

不再直接强制刷新页面，而是根据state里的URL重新加载指定内容，同时处理初始页面的特殊情况：

// 清理掉所有重复的popstate绑定，只保留这一段
window.onpopstate = function(event) {
  // 当有有效state数据时，局部加载对应页面的内容
  if (event.state && event.state.url) {
    $('#content-div').load(event.state.url + ' #content-div', function() {
      // 内容加载完成后滚动到顶部
      $('html').scrollTop(0);
    });
  } else {
    // 处理页面初始加载时的popstate触发（部分浏览器会出现）
    location.reload();
  }
};

3. 额外优化：避免缓存问题 #

如果遇到目标页面内容被浏览器缓存导致更新不及时的情况，可以给URL加个时间戳参数：

$('#content-div').load(event.state.url + ' #content-div?_=' + Date.now(), function() {
  $('html').scrollTop(0);
});

完整修改后的代码片段 #

$('.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').load(href + ' #content-div');
$('html').scrollTop(0);

// HISTORY.PUSHSTATE - 存入URL到state
history.pushState({ url: href }, 'New URL: ' + href, href);

// 处理前进/后退事件
window.onpopstate = function(event) {
  if (event.state && event.state.url) {
    $('#content-div').load(event.state.url + ' #content-div?_=' + Date.now(), function() {
      $('html').scrollTop(0);
    });
  } else {
    location.reload();
  }
};

这样修改后，前进按钮触发时，会根据之前存储的URL重新加载对应内容，页面就能正常更新了。如果还有问题，可以检查目标页面中#content-div是否存在，或者路径是否正确。

内容的提问来源于stack exchange，提问作者dan178