jQuery load功能正常，但点击返回按钮无法回到上一页求助

嘿，我一眼就看出问题出在哪了——你已经用history.pushState()更新了浏览器地址栏，但完全没处理返回按钮触发的popstate事件！这就导致地址虽然变了，但页面内容还是停留在当前页，看起来像没回到上一页一样。

下面是具体的修复方案，只需要加几行代码就能搞定：

步骤1：修改pushState参数，存储页面URL #

首先，在你的openPage函数里，把要跳转的URL存到pushState的state对象中，这样后续返回时能直接拿到目标地址：

function openPage(url) { 
  if(timer != null){ 
    clearTimeout(timer); 
  } 
  if(url.indexOf("?") == -1) { 
    url = url + "?"; 
  } 
  var encodedUrl = encodeURI(url + "&userLoggedIn=" + userLoggedIn); 
  console.log(encodedUrl); 
  $("#mainContent").load(encodedUrl); 
  $("body").scrollTop(0); 
  // 把当前页面URL存入state，方便返回时调用
  history.pushState({pageUrl: url}, null, url); 
}

步骤2：监听popstate事件，处理返回操作 #

添加一个全局的popstate事件监听，当用户点击浏览器的返回/前进按钮时，自动加载对应的页面内容：

// 监听浏览器前进/后退事件
window.addEventListener('popstate', function(event) {
  // 从state中获取要加载的URL，如果是初始页面则用当前地址
  var targetUrl = event.state ? event.state.pageUrl : location.pathname + location.search;
  // 调用openPage加载目标页面
  openPage(targetUrl);
});

额外注意事项 #

• 确保userLoggedIn变量在全局作用域可访问，如果它是局部变量，记得调整作用域或者把它作为参数传入openPage函数。
• 第一次进入页面时popstate不会触发，只有当你通过openPage跳转后，返回操作才会触发这个事件，这是正常的浏览器行为。

这样修改后，用户点击返回按钮时，页面内容会自动切换到上一个加载的页面，地址栏也会同步更新，完全符合预期的浏览体验。

内容的提问来源于stack exchange，提问作者Joshua Melvin Benhar