javascript - 如何操作浏览器历史记录并捕获浏览器后退/前进按钮？

Question

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

我有几个菜单链接，并将点击处理程序绑定(bind)到它们。链接的 href 只是哈希值:href="#Home" 或 href="#About"。

我想在用户单击链接时显示子页面，而不需要重新加载页面并更改浏览器网址。

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

http://jsbin.com/wecubizovu

当我在 Chrome 中运行此程序时，我希望如果用户单击该链接，他会将 #asd 附加到网址，并且 popstate 不会更改。为什么会触发popstate？我怎样才能做到这一点，以便当用户单击链接时，我将哈希附加到浏览器网址，当用户单击浏览器后退按钮时，我捕获该事件并显示我想要的页面？

谢谢!

Answer 1

你的a元素有一个''的href，如果你不阻止默认操作，它仍然会被执行，这会以某种方式搞乱你想做什么。将您的功能更改为

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

实现您正在寻找的东西。

编辑:链接:http://jsbin.com/sosozeteti

http://jsbin.com/sosozeteti/1/edit?html,js