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。