JavaScript历史性的后退/前进

Question

我正在构建一个带有10个按钮和一个容器（简单）的CoffeeScript应用程序。 当用户按下其中一个按钮时：容器改变。

按钮看起来像一个导航栏而不是使用链接（将重新加载整个页面），我使用javascript（Coffeescript，jquery或其他）来更改页面的内容（使用一些Ajax查询来加载数据）。

问题是浏览器的后退和前进按钮无法使用该解决方案......我需要找到解决方案。 路由可能吗？

我非常喜欢Asana.com解决这个问题的方式：实际上地址改变但内容似乎没有完全重新加载。

你有什么建议？ 谢谢您的帮助

Answer 1

哈希值。 最简单的解决方案是每次用户单击按钮时定义URL哈希。 例如：

location.href = "#" + button.id;

通过它，您可以创建历史记录条目，用户可以在浏览器中按后退或前进。

但是你如何检查这种情况何时发生？ 有hashchange事件：

window.onhashchange = function() {
    var state = location.hash.substring(1); // chomps the initial #
    ...
};

将代码基于state变量，可以从那里触发AJAX调用。

顺便说一下，您可以完全更改代码，使用链接而不是带有散列的按钮作为href属性，该属性不会重新加载页面，但会创建历史记录条目并触发hashchange事件。

该hashchange事件是由每一个现代浏览器都支持（即支持history.pushState和IE8-9过，来控制你的历史更灵活，更强大的方式）。