保留浏览器“后退”按钮功能，使用 AJAX/jQuery 加载页面和 history.pushState() 方法答案

【问题标题】：preserving browser "back" button functionality using AJAX/jQuery to load pages and history.pushState() method保留浏览器“后退”按钮功能，使用 AJAX/jQuery 加载页面和 history.pushState() 方法
【发布时间】：2023-03-12 21:42:01
【问题描述】：

我想在通过 AJAX（jQuery load 方法）加载页面并通过 history.pushState 方法将 URL 推送到浏览器栏时保留后退按钮功能。当单击浏览器后退按钮并且第一次单击仅恢复上一个 URL 但不加载上一个页面时，会出现此问题。

到目前为止，这是我的代码：

$(function(){
  var profile_url= "/profile";
   $('#click_button').click(function(){
      $('#main_content').load(profile_url);
      history.pushState({profile:profile_info}, "profile", profile_url);
   });
});

我的问题是有什么方法可以在第一次单击后退按钮时将上一页的 AJAX 加载到 #main_content div 中？

任何帮助/建议将不胜感激。

【问题讨论】：

只是一件小事 - Var 必须是 var。
感谢 pimvdb！刚刚编辑了问题，-tim

标签： javascript ajax jquery browser-history pushstate

【解决方案1】：

我想引导大家使用一个名为 PJAX 的 jQuery 插件，它完成了我最终感兴趣的问题。 Pjax() 结合了 jQuery AJAX 和 pushState 用于页面加载和保存浏览器历史记录。

这里是the code，这里是pjax() 中的nice demo。

它真的很棒且易于使用，在演示中，只需记住单击复选框即可帮助演示 pjax() 的功能。

【讨论】：

这是一个很棒的 jQuery 插件！！谢谢！！
演示链接断开

【解决方案2】：

为此，您需要订阅“popstate”事件。

在导航到会话历史记录条目时，在某些情况下会触发 popstate 事件。 HTML5 spec

你可以这样做：

window.onpopstate = function() {
  $('#main_content').load(location.href)
};

【讨论】：

很棒的安东，谢谢这正是我所需要的！现在我意识到浏览器的“前进”按钮怎么样？有什么方法可以使用 jQuery load() 方法来控制它？当我单击后退按钮后单击前进按钮时，毫不奇怪，它不会重新加载我刚刚离开的页面，谢谢，-tim
popstate 也会在按下前进按钮时触发。
嗨安东，如何辨别后退和前进按钮？如果用户单击后退与前进，是否可以执行某种 if()/else 操作？谢谢！ -蒂姆
对于将来偶然发现这一点的任何人，PJAX 现在有一个名为 pjax:popstate 的事件。

【解决方案3】：

您可以为此目的使用popstate 事件。详情请见https://developer.mozilla.org/en/DOM/window.onpopstate。

还可以查看History.js，它提供了一个包装器，并且可以在浏览器不支持历史 API 的情况下回退到 url 主题标签。

【讨论】：