如何操纵浏览器历史记录并捕获浏览器 back/forward 按钮？

Question

我已经搜索了几个小时，试图进行简单的浏览器历史记录操作。

我有几个菜单 link，我将点击处理程序绑定到它们。链接的 href 只是散列：href="#Home" 或 href="#About".

我想在用户单击 link 时显示子页面，无需重新加载页面并更改浏览器 url。

我也用 pushState() 尝试过这个基本示例，但它不起作用： http://jsbin.com/wecubizovu/1/edit?html,js,console

当我在 Chrome 中运行时，我希望如果用户单击 link，他将在 url 和 popstate 不会改变。为什么会触发 popstate？我怎样才能做到当用户点击 link 时，我将哈希附加到浏览器 url 并且当用户点击浏览器后退按钮时，我捕捉到该事件并显示我想要的页面？

谢谢！

Answer 1

您的 a 元素有一个 href 或 ''，如果您不阻止默认操作，它仍然会执行，这会以某种方式弄乱您想要做的事情。将您的函数更改为

$("#asd").click(function(e) {
  e.preventDefault();
  alert("jo");
  window.history.pushState("", document.title, "#asd");
});

实现您正在寻找的东西。

How to manipulate browser history and catch browser back/forward buttons?