启用Ajax应用程序的后退/前进键事件

Question

我有一个应用程序，它在AJAX上工作得非常重。但是我想要其中的导航功能。为了欺骗URL，我改变了location.hash来生成URL。但是如果我使用后退/前进按钮，只有URL会更改，而页面不会重新加载。如何覆盖history.back以重新加载页面。

- Rakesh

---

你可能想将问题的标题重命名为更具体的名称。比如“用户单击浏览器后退按钮时通过ajax重新加载页面”或类似的内容。 - Antti Tarvainen

Answer 1

我不知道除了持续轮询之外还有其他的实现方式。一个实现可能看起来像这样：

var lastHash = '';

function pollHash() {
    if(lastHash !== location.hash) {
        lastHash = location.hash;
        // hash has changed, so do stuff:
        alert(lastHash);
    }
}

setInterval(pollHash, 100);

- Christoph

---

谢谢，这非常有用。你可以对它进行一些小改进，如果你将整个表达式包装在一个函数语句中并立即调用该函数，那么该函数的返回值将是你编写的函数。这样你就可以消除全局绑定。 - viam0Zah

我认为这就是Török所说的。看起来运行良好。由于封装，感觉更加清晰。var hashChecker = function(){ lastHash = location.hash; return setInterval(function() { if(lastHash !== location.hash) { lastHash = location.hash; } }, 50); }() - Derek Gathright

Answer 2

您无法完全捕捉返回事件，但大多数这些问题已经得到解决 - 这是一件好事，因为这是一个难题。

请查看 really simple history（也称为RSH），然后实现它或通过它来了解其工作原理。

- annakata

Answer 3

这个问题的答案与以下问题的答案基本相同：

• 如何在URL中显示Ajax请求？
• Gmail如何处理富JavaScript中的后退/前进？

总之，您可能想要查看两个项目，它们解释了整个hashchange过程并将其与ajax一起使用：

• jQuery History（使用哈希管理页面状态并绑定更改以更新页面）。

• jQuery Ajaxy（jQuery History的ajax扩展，允许完全的ajax网站，同时完全不显眼且优雅降级）。

- balupton

Answer 4

balupton的回答真的很棒。

但是你还有另一个jQuery插件来处理你的ajax请求，它是address。

- Thiago Diniz