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 事件。

每个现代浏览器(也支持 history.pushState，这是一种更灵活、更强大的控制历史记录的方式)和 IE8-9 都支持 hashchange 事件。