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

Question

我有一个 AJAX 应用程序。用户单击一个按钮，页面的显示就会改变。他们点击后退按钮，希望回到原来的状态，但相反，他们在浏览器中回到了上一页。

如何拦截并重新分配后退按钮事件？我研究过像 RSH 这样的库（我无法开始工作…），而且我听说使用散列标签在某种程度上有帮助，但我无法理解它。

原文由 Zack Burt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 // this does not work
document.onHistoryGo = function() { return false; }

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

如果您确实有一个 _网络应用程序_（而不是只有一个具有某些 Ajaxy 功能的网站），那么接管后退按钮（如您提到的那样，在 URL 上有片段）是合理的。 Gmail 就是这样做的。我说的是当您的 Web 应用程序全部在一个页面中时，所有内容都是独立的。

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

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

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

这种重定向（仅哈希）不会尝试从服务器获取任何内容，但会在浏览器的历史列表中插入一个槽。所以在上面的例子中，用户点击“返回”，他们现在在地址栏中显示 _#deletedsomething 。他们再次回击，他们仍在您的页面上，但没有散列。然后再回来，他们 实际上 回去了，回到他们来自的地方。

现在是困难的部分，让你的 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);

原文由 jpsimons 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要对一个旧的（但流行的）问题给出最新的答案：

HTML5 引入了 history.pushState() 和 history.replaceState() 方法，分别允许您添加和修改历史条目。这些方法与 window.onpopstate 事件结合使用。

使用 history.pushState() 更改在更改状态后创建的对象的 HTTP 标头中使用的引荐来源网址 XMLHttpRequest 对象。 referrer 将是在创建 XMLHttpRequest 对象时其窗口为 this 的文档的 URL。

资料来源：从 Mozilla Developer Network 操纵浏览器历史记录。

原文由 gitaarik 发布，翻译遵循 CC BY-SA 3.0 许可协议