0

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

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

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

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

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

4

1 回答 1

2

哈希。最简单的解决方案是在用户每次单击按钮时定义一个 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。

于 2013-07-31T08:54:17.870 回答