使用浏览器后退/前进按钮注册点击处理程序

Question

我正在构建一个HTML5单页Web应用程序，它采用“视图”或“屏幕”的概念;基本上只是呈现在任何给定时间可见的不同DOM元素。当用户在“视图”之间导航时，我实际上只是隐藏/启用DOM元素。

我希望能够使用浏览器的历史记录功能，包括后退/前进按钮，但我不确定它如何影响history.pushState和window.onpopstate的概念

理想情况下，我想使用浏览器的后退/前进历史记录按钮注册“点击处理程序”（显然是以跨浏览器兼容的方式），这样当用户点击任一按钮时，它就会使用我自己的自定义{{ 1}} object（在JavaScript中），它指出要为用户呈现的“视图”。

我该怎么做？

Answer 1

首先，您需要某种路由解决方案。您可以使用Crossroads注册和管理您的路线。每个路由都应该有一个处理程序，它可以在单个页面中启用相应的div。

var route1 = crossroads.addRoute('/page1/', function(id){
  //enable div for page1 route
});

然后，您可以使用Hasher来管理浏览器历史记录。

另一种方法是使用Durandal重建您的应用程序，该应用程序具有路由器并可立即管理浏览器历史记录。