当使用History.js时，我该如何检测后退/前进按钮被点击？

Question

我在我的代码中使用jQuery和History.js（点击）。

当通过ajax加载新内容时，我使用以下代码：

History.pushState({my:stateobject},"newtitle","supernewurl");

看起来这个方法可以工作，因为浏览器中的URL已经更新。

然而，我不知道在哪里可以连接我的代码，每当用户按下返回或前进按钮时。哪种方法/事件可用于此？

- Joey

---

解决方案在这里：https://dev59.com/v2PVa4cB1Zd3GeqP-fBj - Bram Vanroy

Answer 1

您需要绑定一个事件处理程序到statechange事件，如下所示：

$(window).bind('statechange',function(){
// Do something, inspect History.getState() to decide what
})

History.js带有完整的JavaScript片段，可以用来完全“ajaxify”网站：https://github.com/browserstate/ajaxify

点击链接查看更多灵感。

- jgivoni

---

为什么会被踩？这是正确的做法...虽然我可能会做类似于：History.Adapter.bind(window,'popstate',function(){ $modalContext.modal('close'); }); - chug2k

Answer 2

您不需要捕获“后退点击事件”，因为此类事件并不存在。

您需要使用window.history.pushState、window.history.popState和window.history.replaceState方法，确保history对象处于正确的状态。

更多信息请参考：https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history。

- Alex

Answer 3

我可以使用“onPopState”事件来触发我的自定义AJAX代码。

window.onpopstate = function(event) {
  $(fellowModal).foundation('reveal', 'close');
};

我尝试了几种其他方法，但这是对我有效的。

- Chris Roane