在我的AJAX应用程序中拦截对“后退”按钮的调用

Question

我有一个AJAX应用。用户单击一个按钮，页面的显示就会更改。他们单击“后退”按钮，希望进入原始状态，但是，却转到浏览器中的上一页。

如何截取并重新分配后退按钮事件？我已经研究过RSH之类的库（我无法使用…），而且我听说使用井号在某种程度上有所帮助，但我无法理解。

Answer 1

啊，后退按钮。您可能想象“后退”会触发一个JavaScript事件，您可以像这样简单地将其取消：

document.onHistoryGo = function() { return false; }

不对 根本没有这样的事件。

如果您确实有一个 Web应用程序
（而不只是一个具有某些ajaxy功能的网站），那么接管后退按钮（如您提到的，URL上的片段）是合理的。Gmail会这样做。我说的是什么时候您的Web应用程序在一个页面中完全独立。

该技术很简单-每当用户执行修改操作时，都将重定向到您已经使用的相同URL，但具有不同的哈希片段。例如

window.location.hash = "#deleted_something";
...
window.location.hash = "#did_something_else";

如果您的Web应用程序的整体状态是可哈希的，那么这是使用哈希的好地方。假设您有一封电子邮件列表，也许您将它们的所有ID和已读/未读状态连接起来，并使用MD5哈希作为片段标识符。

这种重定向（仅适用于哈希）不会尝试从服务器获取任何内容，但会在浏览器的历史记录列表中插入一个插槽。因此，在上面的html" target="_blank">示例中，用户点击“后退”，他们现在在地址栏中显示
#deleted_something 。他们再次回击，它们仍然在您的页面上，但没有哈希。然后再回来，他们 实际上 回到了他们来自哪里。

现在，最困难的部分是让您的JavaScript检测用户何时回击（以便您可以还原状态）。您要做的就是观察窗口位置，并查看其何时更改。随着投票。（我知道，，轮询。好吧，现在没有比这更好的跨浏览器了）。但是，您将无法确定它们是前进还是后退，因此您必须借助哈希标识符来发挥创意。（也许哈希与序列号串联在一起…）

这是代码的要旨。（这也是jQuery History插件的工作方式。）

var hash = window.location.hash;
setInterval(function(){
    if (window.location.hash != hash) {
        hash = window.location.hash;
        alert("User went back or forward to application state represented by " + hash);
    }
}, 100);