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

Question

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

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

理想情况下，我想使用浏览器的后退/前进历史记录按钮注册"点击处理程序"（显然是以跨浏览器兼容的方式），以便当用户单击任一按钮时，它会使用我自己的自定义Historian对象（在 JavaScript 中），以确定要为用户呈现哪个"视图"。

我该怎么做？

Answer 1

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

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

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

另一种方法是使用 Durandal 重建您的应用程序，它有一个路由器并开箱即用地管理浏览器历史记录。